feat: implement task group actions

- allow sorting specifc task groups - duplicate task group - delete all tasks in task group
chore: switch eslint to lint changed files intead of whole project
2020-09-10 22:33:03 -05:00 · 2020-09-10 22:13:16 -05:00
199 changed files with 6942 additions and 16653 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -18,8 +18,6 @@ If applicable, add screenshots to help explain your problem.
 **Additional context**
 Add any other context about the problem here.

-Please send the Taskcafe web service logs if applicable.
-
 <!--

 Please read the contributing guide before working on any new pull requests!
--- a/.tmuxinator.yml
+++ b/.tmuxinator.yml
@ -21,4 +21,4 @@ windows:
  - database:
      root: ./
      panes:
-        - pgcli postgres://taskcafe:taskcafe_test@localhost:8855/taskcafe
+        - pgcli postgres://taskcafe:taskcafe_test@localhost:5432/taskcafe
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -9,7 +9,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Task sorting & filtering
 - Redesigned the Task Details UI
- Implement task group actions (duplicate/delete all tasks/sort)

 ### Fixed
 - removed CORS middleware to fix security issue
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -32,10 +32,6 @@ The `description` is a decriptive summary of the change the PR will make.
 - One PR per fix or feature
 - Setup & install [pre-commit hooks](https://pre-commit.com/#install) then install the hooks `pre-commit install && pre-commit install --hook-type commit-msg`

-### Unwanted PRs
-
- Please do not submit pull requests containing only typo fixes, fixed spelling mistakes, or minor wording changes.
-
 ### Git Commit Message Style

 This project uses the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) format.
--- a/README.md
+++ b/README.md
@ -9,14 +9,11 @@
    <img alt="Releases" src="https://img.shields.io/github/v/release/JordanKnott/taskcafe" />
  </a>
  <a href="https://hub.docker.com/repository/docker/taskcafe/taskcafe">
-    <img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker&sort=semver" />
+    <img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker" />
  </a>
  <a href="https://goreportcard.com/report/github.com/JordanKnott/taskcafe">
    <img alt="Go Report Card" src="https://goreportcard.com/badge/github.com/JordanKnott/taskcafe" />
  </a>
-  <a href="">
-    <img alt="Docker pulls" src="https://img.shields.io/docker/pulls/taskcafe/taskcafe" />
-  </a>
 </p>
 <p align="center">
 Was this project useful? Please consider <a href="https://www.buymeacoffee.com/jordanknott">donating</a> to help me improve it!
@ -24,8 +21,6 @@ Was this project useful? Please consider <a href="https://www.buymeacoffee.com/j

 **Please note that this project is still in active development. Some options may not work yet! For updates on development, join the Discord server**

-![Taskcafe](./.github/taskcafe_preview.png)
-
 ## Features

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

 [email_notifications]
 enabled = true
@ -17,9 +17,8 @@ user = 'taskcafe'
 password = 'taskcafe_test'

 [smtp]
-username = 'taskcafe@example.com'
-password = ''
-from = 'no-reply@taskcafe.com'
-host = 'localhost'
-port = 11500
-skip_verify = false
+username = 'admin@example.com'
+password = 'example'
+server = 'mail.example.com'
+port = 465
+connection_security = 'STARTTLS'
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@ -12,7 +12,7 @@ services:
    volumes:
      - taskcafe-postgres:/var/lib/postgresql/data
    ports:
-      - 8855:5432
+      - 5432:5432
  mailhog:
    image: mailhog/mailhog:latest
    restart: always
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@ -31,9 +31,7 @@
    "@typescript-eslint/no-unused-vars": "off",
    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
    "no-case-declarations": "off",
-    "no-plusplus": "off",
    "react/prop-types": 0,
-    "no-continue": "off",
    "react/jsx-props-no-spreading": "off",
    "no-param-reassign": "off",
    "import/extensions": [
--- a/frontend/package.json
+++ b/frontend/package.json
@ -6,16 +6,21 @@
    "@apollo/client": "^3.0.0-rc.8",
    "@apollo/react-common": "^3.1.4",
    "@apollo/react-hooks": "^3.1.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.27",
+    "@fortawesome/free-brands-svg-icons": "^5.12.1",
+    "@fortawesome/free-regular-svg-icons": "^5.12.1",
+    "@fortawesome/free-solid-svg-icons": "^5.12.1",
+    "@fortawesome/react-fontawesome": "^0.1.8",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
    "@types/axios": "^0.14.0",
    "@types/color": "^3.0.1",
    "@types/date-fns": "^2.6.0",
-    "@types/dompurify": "^2.0.4",
-    "@types/emoji-mart": "^3.0.4",
    "@types/jest": "^24.0.0",
    "@types/jwt-decode": "^2.2.1",
    "@types/lodash": "^4.14.149",
    "@types/node": "^12.0.0",
-    "@types/query-string": "^6.3.0",
    "@types/react": "^16.9.21",
    "@types/react-beautiful-dnd": "^12.1.1",
    "@types/react-datepicker": "^2.11.0",
@ -36,34 +41,28 @@
    "axios-auth-refresh": "^2.2.7",
    "color": "^3.1.2",
    "date-fns": "^2.14.0",
-    "dayjs": "^1.9.1",
-    "dompurify": "^2.2.6",
-    "emoji-mart": "^3.0.0",
-    "emoticon": "^3.2.0",
    "graphql": "^15.0.0",
    "graphql-tag": "^2.10.3",
    "history": "^4.10.1",
    "immer": "^6.0.3",
    "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.20",
-    "node-emoji": "^1.10.0",
+    "lodash": "^4.17.15",
+    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
-    "query-string": "^6.13.7",
    "react": "^16.12.0",
    "react-autosize-textarea": "^7.0.0",
    "react-beautiful-dnd": "^13.0.0",
    "react-datepicker": "^2.14.1",
    "react-dom": "^16.12.0",
-    "react-emoji-render": "^1.2.4",
    "react-hook-form": "^6.0.6",
    "react-markdown": "^4.3.1",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "react-select": "^3.1.0",
+    "rich-markdown-editor": "^10.6.5",
    "react-timeago": "^4.4.0",
    "react-toastify": "^6.0.8",
-    "rich-markdown-editor": "^10.6.5",
    "styled-components": "^5.0.1",
    "typescript": "~3.7.2"
  },
--- a/frontend/src/Admin/index.tsx
+++ b/frontend/src/Admin/index.tsx
@ -5,7 +5,6 @@ import GlobalTopNavbar from 'App/TopNavbar';
 import {
  useUsersQuery,
  useDeleteUserAccountMutation,
-  useDeleteInvitedUserAccountMutation,
  useCreateUserAccountMutation,
  UsersDocument,
  UsersQuery,
@ -82,7 +81,7 @@ const AddUserInput = styled(Input)`
 `;

 const InputError = styled.span`
-  color: ${props => props.theme.colors.danger};
+  color: rgba(${props => props.theme.colors.danger});
  font-size: 12px;
 `;

@ -172,27 +171,16 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {

 const AdminRoute = () => {
  useEffect(() => {
-    document.title = 'Admin | Taskcafé';
+    document.title = 'Taskcafé | Admin';
  }, []);
-  const { loading, data } = useUsersQuery({ fetchPolicy: 'cache-and-network' });
+  const { loading, data } = useUsersQuery();
  const { showPopup, hidePopup } = usePopup();
  const { user } = useCurrentUser();
-  const [deleteInvitedUser] = useDeleteInvitedUserAccountMutation({
-    update: (client, response) => {
-      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
-        produce(cache, draftCache => {
-          draftCache.invitedUsers = cache.invitedUsers.filter(
-            u => u.id !== response.data?.deleteInvitedUserAccount.invitedUser.id,
-          );
-        }),
-      );
-    },
-  });
  const [deleteUser] = useDeleteUserAccountMutation({
    update: (client, response) => {
      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
        produce(cache, draftCache => {
-          draftCache.users = cache.users.filter(u => u.id !== response.data?.deleteUserAccount.userAccount.id);
+          draftCache.users = cache.users.filter(u => u.id !== response.data.deleteUserAccount.userAccount.id);
        }),
      );
    },
@ -203,7 +191,7 @@ const AdminRoute = () => {
        query: UsersDocument,
      });
      const newData = produce(cacheData, (draftState: any) => {
-        draftState.users = [...draftState.users, { ...createData.data?.createUserAccount }];
+        draftState.users = [...draftState.users, { ...createData.data.createUserAccount }];
      });

      client.writeQuery({
@ -214,6 +202,9 @@ const AdminRoute = () => {
      });
    },
  });
+  if (loading) {
+    return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
+  }
  if (data && user) {
    if (user.roles.org !== 'admin') {
      return <Redirect to="/" />;
@ -224,16 +215,11 @@ const AdminRoute = () => {
        <Admin
          initialTab={0}
          users={data.users}
-          invitedUsers={data.invitedUsers}
          canInviteUser={user.roles.org === 'admin'}
          onInviteUser={NOOP}
          onUpdateUserPassword={() => {
            hidePopup();
          }}
-          onDeleteInvitedUser={invitedUserID => {
-            deleteInvitedUser({ variables: { invitedUserID } });
-            hidePopup();
-          }}
          onDeleteUser={(userID, newOwnerID) => {
            deleteUser({ variables: { userID, newOwnerID } });
            hidePopup();
@ -256,7 +242,7 @@ const AdminRoute = () => {
      </>
    );
  }
-  return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
+  return <span>error</span>;
 };

 export default AdminRoute;
--- a/frontend/src/App/Routes.tsx
+++ b/frontend/src/App/Routes.tsx
@ -1,20 +1,16 @@
-import React, { useEffect, useState } from 'react';
-import { Switch, Route, useHistory } from 'react-router-dom';
+import React from 'react';
+import { Switch, Route } 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 Project from 'Projects/Project';
 import Teams from 'Teams';
 import Login from 'Auth';
-import Register from 'Register';
+import Install from 'Install';
 import Profile from 'Profile';
 import styled from 'styled-components';
-import JwtDecode from 'jwt-decode';
-import { setAccessToken } from 'shared/utils/accessToken';
-import { useCurrentUser } from 'App/context';

 const MainContent = styled.div`
  padding: 0 0 0 0;
@ -25,43 +21,14 @@ const MainContent = styled.div`
  flex-grow: 1;
 `;

-type RefreshTokenResponse = {
-  accessToken: string;
-  setup?: null | { confirmToken: string };
+type RoutesProps = {
+  history: H.History;
 };

-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 : (
+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} />
@ -71,20 +38,6 @@ const AuthorizedRoutes = () => {
      <Route path="/admin" component={Admin} />
    </MainContent>
  </Switch>
-  );
-};
-
-type RoutesProps = {
-  history: H.History;
-};
-
-const Routes: React.FC<RoutesProps> = () => (
-  <Switch>
-    <Route exact path="/login" component={Login} />
-    <Route exact path="/register" component={Register} />
-    <Route exact path="/confirm" component={Confirm} />
-    <AuthorizedRoutes />
-  </Switch>
 );

 export default Routes;
--- a/frontend/src/App/ThemeStyles.ts
+++ b/frontend/src/App/ThemeStyles.ts
@ -1,28 +1,26 @@
 import { DefaultTheme } from 'styled-components';
-import Color from 'color';

 const theme: DefaultTheme = {
  borderRadius: {
-    primary: '3x',
+    primary: '3px',
    alternate: '6px',
  },
  colors: {
-    multiColors: ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'],
-    primary: '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)',
+    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',
    text: {
-      primary: 'rgb(194, 198, 220)',
-      secondary: 'rgb(255, 255, 255)',
+      primary: '194, 198, 220',
+      secondary: '255, 255, 255',
    },
-    border: 'rgb(65, 69, 97)',
+    border: '65, 69, 97',
    bg: {
-      primary: 'rgb(16, 22, 58)',
-      secondary: 'rgb(38, 44, 73)',
+      primary: '16, 22, 58',
+      secondary: '38, 44, 73',
    },
  },
 };
--- a/frontend/src/App/TopNavbar.tsx
+++ b/frontend/src/App/TopNavbar.tsx
@ -20,7 +20,6 @@ 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;
@ -63,7 +62,7 @@ const TeamProjectBackground = styled.div<{ color: string }>`
  opacity: 1;
  border-radius: 3px;
  &:before {
-    background: ${props => props.theme.colors.bg.secondary};
+    background: rgba(${props => props.theme.colors.bg.secondary});
    bottom: 0;
    content: '';
    left: 0;
@ -115,7 +114,7 @@ const TeamProjectContainer = styled.div`
  margin: 0 4px 4px 0;
  min-width: 0;
  &:hover ${TeamProjectTitle} {
-    color: ${props => props.theme.colors.text.secondary};
+    color: rgba(${props => props.theme.colors.text.secondary});
  }
  &:hover ${TeamProjectAvatar} {
    opacity: 1;
@ -125,38 +124,24 @@ const TeamProjectContainer = styled.div`
  }
 `;

-const colors = [theme.colors.primary, theme.colors.secondary];
+const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];

 const ProjectFinder = () => {
-  const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'cache-and-network' });
+  const { loading, data } = useGetProjectsQuery();
+  if (loading) {
+    return <span>loading</span>;
+  }
  if (data) {
    const { projects, teams } = data;
-    const personalProjects = data.projects.filter(p => p.team === null);
    const projectTeams = teams.map(team => {
      return {
        id: team.id,
        name: team.name,
-        projects: projects.filter(project => project.team && project.team.id === team.id),
+        projects: projects.filter(project => project.team.id === team.id),
      };
    });
    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>
@ -178,10 +163,10 @@ const ProjectFinder = () => {
      </>
    );
  }
-  return <span>loading</span>;
+  return <span>error</span>;
 };
 type ProjectPopupProps = {
-  history: any;
+  history: History<History.PoorMansUnknown>;
  name: string;
  projectID: string;
 };
@ -196,7 +181,7 @@ export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, proje

      const newData = produce(cacheData, (draftState: any) => {
        draftState.projects = draftState.projects.filter(
-          (project: any) => project.id !== deleteData.data?.deleteProject.project.id,
+          (project: any) => project.id !== deleteData.data.deleteProject.project.id,
        );
      });

@ -245,12 +230,10 @@ type GlobalTopNavbarProps = {
  menuType?: Array<MenuItem>;
  onChangeRole?: (userID: string, roleCode: RoleCode) => void;
  projectMembers?: null | Array<TaskUser>;
-  projectInvitedMembers?: null | Array<InvitedUser>;
  onSaveProjectName?: (projectName: string) => void;
  onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
  onSetTab?: (tab: number) => void;
  onRemoveFromBoard?: (userID: string) => void;
-  onRemoveInvitedFromBoard?: (email: string) => void;
 };

 const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
@ -263,10 +246,8 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
  name,
  popupContent,
  projectMembers,
-  projectInvitedMembers,
  onInviteUser,
  onSaveProjectName,
-  onRemoveInvitedFromBoard,
  onRemoveFromBoard,
 }) => {
  const { user, setUserRoles, setUser } = useCurrentUser();
@ -343,7 +324,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
            />
          ))}
        </NotificationPopup>,
-        { width: 415, borders: false, diamondColor: theme.colors.primary },
+        { width: 415, borders: false, diamondColor: '#7367f0' },
      );
    }
  };
@ -352,34 +333,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
    return null;
  }
  const userIsTeamOrProjectAdmin = user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID);
-  const onInvitedMemberProfile = ($targetRef: React.RefObject<HTMLElement>, email: string) => {
-    const member = projectInvitedMembers ? projectInvitedMembers.find(u => u.email === email) : null;
-    if (member) {
-      showPopup(
-        $targetRef,
-        <MiniProfile
-          onRemoveFromBoard={() => {
-            if (onRemoveInvitedFromBoard) {
-              onRemoveInvitedFromBoard(member.email);
-            }
-          }}
-          invited
-          user={{
-            id: member.email,
-            fullName: member.email,
-            bio: 'Invited',
-            profileIcon: {
-              bgColor: '#000',
-              url: null,
-              initials: member.email.charAt(0),
-            },
-          }}
-          bio=""
-        />,
-      );
-    }
-  };
-
  const onMemberProfile = ($targetRef: React.RefObject<HTMLElement>, memberID: string) => {
    const member = projectMembers ? projectMembers.find(u => u.id === memberID) : null;
    const warning =
@ -429,7 +382,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
        canEditProjectName={userIsTeamOrProjectAdmin}
        canInviteUser={userIsTeamOrProjectAdmin}
        onMemberProfile={onMemberProfile}
-        onInvitedMemberProfile={onInvitedMemberProfile}
        onInviteUser={onInviteUser}
        onChangeRole={onChangeRole}
        onChangeProjectOwner={onChangeProjectOwner}
@ -440,7 +392,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
          history.push('/');
        }}
        projectMembers={projectMembers}
-        projectInvitedMembers={projectInvitedMembers}
        onProfileClick={onProfileClick}
        onSaveName={onSaveProjectName}
        onOpenSettings={onOpenSettings}
--- a/frontend/src/App/index.tsx
+++ b/frontend/src/App/index.tsx
@ -28,13 +28,13 @@ const StyledContainer = styled(ToastContainer).attrs({
    color: #fff;
  }
  .Toastify__toast--error {
-    background: ${props => props.theme.colors.danger};
+    background: rgba(${props => props.theme.colors.danger});
  }
  .Toastify__toast--warning {
-    background: ${props => props.theme.colors.warning};
+    background: rgba(${props => props.theme.colors.warning});
  }
  .Toastify__toast--success {
-    background: ${props => props.theme.colors.success};
+    background: rgba(${props => props.theme.colors.success});
  }
  .Toastify__toast-body {
  }
@ -46,8 +46,13 @@ const StyledContainer = styled(ToastContainer).attrs({
 `;

 const history = createBrowserHistory();
+type RefreshTokenResponse = {
+  accessToken: string;
+  isInstalled: boolean;
+};

 const App = () => {
+  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState<CurrentUserRaw | null>(null);
  const setUserRoles = (roles: CurrentUserRoles) => {
    if (user) {
@ -58,6 +63,32 @@ const App = () => {
    }
  };

+  useEffect(() => {
+    fetch('/auth/refresh_token', {
+      method: 'POST',
+      credentials: 'include',
+    }).then(async x => {
+      const { status } = x;
+      if (status === 400) {
+        history.replace('/login');
+      } else {
+        const response: RefreshTokenResponse = await x.json();
+        const { accessToken, isInstalled } = response;
+        const claims: JWTToken = jwtDecode(accessToken);
+        const currentUser = {
+          id: claims.userId,
+          roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
+        };
+        setUser(currentUser);
+        setAccessToken(accessToken);
+        if (!isInstalled) {
+          history.replace('/install');
+        }
+      }
+      setLoading(false);
+    });
+  }, []);
+
  return (
    <>
      <UserContext.Provider value={{ user, setUser, setUserRoles }}>
@ -66,7 +97,13 @@ const App = () => {
          <BaseStyles />
          <Router history={history}>
            <PopupProvider>
+              {loading ? (
+                <div>loading</div>
+              ) : (
+                <>
                  <Routes history={history} />
+                </>
+              )}
            </PopupProvider>
          </Router>
          <StyledContainer
--- a/frontend/src/Auth/index.tsx
+++ b/frontend/src/Auth/index.tsx
@ -52,21 +52,8 @@ const Auth = () => {
    }).then(async x => {
      const { status } = x;
      if (status === 200) {
-        const response: RefreshTokenResponse = await x.json();
-        const { accessToken, setup } = response;
-        if (setup) {
-          history.replace(`/register?confirmToken=${setup.confirmToken}`);
-        } else {
-          const claims: JWTToken = JwtDecode(accessToken);
-          const currentUser = {
-            id: claims.userId,
-            roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
-          };
-          setUser(currentUser);
-          setAccessToken(accessToken);
        history.replace('/projects');
      }
-      }
    });
  }, []);

--- a/frontend/src/Confirm/index.tsx
+++ b/frontend/src/Confirm/index.tsx
@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import axios from 'axios';
-import Confirm from 'shared/components/Confirm';
-import { useHistory, useLocation } from 'react-router';
-import * as QueryString from 'query-string';
-import { toast } from 'react-toastify';
-import { Container, LoginWrapper } from './Styles';
-import JwtDecode from 'jwt-decode';
-import { setAccessToken } from 'shared/utils/accessToken';
-import { useCurrentUser } from 'App/context';
-
-const UsersConfirm = () => {
-  const history = useHistory();
-  const location = useLocation();
-  const [registered, setRegistered] = useState(false);
-  const params = QueryString.parse(location.search);
-  const { setUser } = useCurrentUser();
-  return (
-    <Container>
-      <LoginWrapper>
-        <Confirm
-          hasConfirmToken={params.confirmToken !== undefined}
-          onConfirmUser={setFailed => {
-            fetch('/auth/confirm', {
-              method: 'POST',
-              body: JSON.stringify({
-                confirmToken: params.confirmToken,
-              }),
-            })
-              .then(async x => {
-                const { status } = x;
-                if (status === 200) {
-                  const response = await x.json();
-                  const { accessToken } = response;
-                  const claims: JWTToken = JwtDecode(accessToken);
-                  const currentUser = {
-                    id: claims.userId,
-                    roles: {
-                      org: claims.orgRole,
-                      teams: new Map<string, string>(),
-                      projects: new Map<string, string>(),
-                    },
-                  };
-                  setUser(currentUser);
-                  setAccessToken(accessToken);
-                  history.push('/');
-                } else {
-                  setFailed();
-                }
-              })
-              .catch(() => {
-                setFailed();
-              });
-          }}
-        />
-      </LoginWrapper>
-    </Container>
-  );
-};
-
-export default UsersConfirm;
--- a/frontend/src/Install/Styles.ts
+++ b/frontend/src/Install/Styles.ts
--- a/frontend/src/Install/index.tsx
+++ b/frontend/src/Install/index.tsx
@ -0,0 +1,88 @@
+import React, { useEffect, useContext } from 'react';
+import axios from 'axios';
+import Register from 'shared/components/Register';
+import { useHistory } from 'react-router';
+import { getAccessToken, setAccessToken } from 'shared/utils/accessToken';
+import UserContext from 'App/context';
+import jwtDecode from 'jwt-decode';
+import { Container, LoginWrapper } from './Styles';
+
+const Install = () => {
+  const history = useHistory();
+  const { setUser } = useContext(UserContext);
+  useEffect(() => {
+    fetch('/auth/refresh_token', {
+      method: 'POST',
+      credentials: 'include',
+    }).then(async x => {
+      const { status } = x;
+      const response: RefreshTokenResponse = await x.json();
+      const { isInstalled } = response;
+      if (status === 200 && isInstalled) {
+        history.replace('/projects');
+      }
+    });
+  }, []);
+  return (
+    <Container>
+      <LoginWrapper>
+        <Register
+          onSubmit={(data, setComplete, setError) => {
+            const accessToken = getAccessToken();
+            if (data.password !== data.password_confirm) {
+              setError('password', { type: 'error', message: 'Passwords must match' });
+              setError('password_confirm', { type: 'error', message: 'Passwords must match' });
+            } else {
+              axios
+                .post(
+                  '/auth/install',
+                  {
+                    user: {
+                      username: data.username,
+                      roleCode: 'admin',
+                      email: data.email,
+                      password: data.password,
+                      initials: data.initials,
+                      fullname: data.fullname,
+                    },
+                  },
+                  {
+                    headers: {
+                      Authorization: `Bearer ${accessToken}`,
+                    },
+                  },
+                )
+                .then(async x => {
+                  const { status } = x;
+                  if (status === 400) {
+                    history.replace('/login');
+                  } else {
+                    const response: RefreshTokenResponse = await x.data;
+                    const { accessToken: newToken, isInstalled } = response;
+                    const claims: JWTToken = jwtDecode(accessToken);
+                    const currentUser = {
+                      id: claims.userId,
+                      roles: {
+                        org: claims.orgRole,
+                        teams: new Map<string, string>(),
+                        projects: new Map<string, string>(),
+                      },
+                    };
+                    setUser(currentUser);
+                    setAccessToken(accessToken);
+                    if (!isInstalled) {
+                      history.replace('/install');
+                    }
+                  }
+                  history.push('/projects');
+                });
+            }
+            setComplete(true);
+          }}
+        />
+      </LoginWrapper>
+    </Container>
+  );
+};
+
+export default Install;
--- a/frontend/src/Profile/index.tsx
+++ b/frontend/src/Profile/index.tsx
@ -3,20 +3,11 @@ import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
 import { getAccessToken } from 'shared/utils/accessToken';
 import Settings from 'shared/components/Settings';
-import {
-  useMeQuery,
-  useClearProfileAvatarMutation,
-  useUpdateUserPasswordMutation,
-  useUpdateUserInfoMutation,
-  MeQuery,
-  MeDocument,
-} from 'shared/generated/graphql';
+import { useMeQuery, useClearProfileAvatarMutation, useUpdateUserPasswordMutation } from 'shared/generated/graphql';
 import axios from 'axios';
 import { useCurrentUser } from 'App/context';
 import NOOP from 'shared/utils/noop';
 import { toast } from 'react-toastify';
-import updateApolloCache from 'shared/utils/cache';
-import produce from 'immer';

 const MainContent = styled.div`
  padding: 0 0 50px 80px;
@ -28,7 +19,6 @@ const Projects = () => {
  const $fileUpload = useRef<HTMLInputElement>(null);
  const [clearProfileAvatar] = useClearProfileAvatarMutation();
  const { user } = useCurrentUser();
-  const [updateUserInfo] = useUpdateUserInfoMutation();
  const [updateUserPassword] = useUpdateUserPasswordMutation();
  const { loading, data, refetch } = useMeQuery();
  useEffect(() => {
@ -79,13 +69,6 @@ const Projects = () => {
            toast('Password was changed!');
            done();
          }}
-          onChangeUserInfo={(d, done) => {
-            updateUserInfo({
-              variables: { name: d.full_name, bio: d.bio, email: d.email, initials: d.initials },
-            });
-            toast('User info was saved!');
-            done();
-          }}
          onProfileAvatarRemove={() => {
            clearProfileAvatar();
          }}
--- a/frontend/src/Projects/Project/Board/FilterMeta.tsx
+++ b/frontend/src/Projects/Project/Board/FilterMeta.tsx
@ -5,6 +5,7 @@ import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'sha
 import Input from 'shared/components/ControlledInput';
 import { Popup, usePopup } from 'shared/components/PopupMenu';
 import produce from 'immer';
+import moment from 'moment';
 import { mixin } from 'shared/utils/styles';
 import Member from 'shared/components/Member';

@ -12,7 +13,7 @@ const FilterMember = styled(Member)`
  margin: 2px 0;
  &:hover {
    cursor: pointer;
-    background: ${props => props.theme.colors.primary};
+    background: rgba(${props => props.theme.colors.primary});
  }
 `;

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

@ -80,7 +81,7 @@ export const ActionTitle = styled.span`
 `;

 const ActionItemSeparator = styled.li`
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
--- a/frontend/src/Projects/Project/Board/FilterStatus.tsx
+++ b/frontend/src/Projects/Project/Board/FilterStatus.tsx
@ -30,7 +30,7 @@ export const ActionItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
  }
  &:hover ${ActionExtraMenuContainer} {
    visibility: visible;
@ -69,11 +69,11 @@ export const ActionExtraMenuItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: rgb(${props => props.theme.colors.primary});
+    background: rgb(115, 103, 240);
  }
 `;
 const ActionExtraMenuSeparator = styled.li`
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
--- a/frontend/src/Projects/Project/Board/SortPopup.tsx
+++ b/frontend/src/Projects/Project/Board/SortPopup.tsx
@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
-import { mixin } from 'shared/utils/styles';

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

@ -30,7 +29,7 @@ export const ActionTitle = styled.span`
 `;

 const ActionItemSeparator = styled.li`
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
@ -74,11 +73,6 @@ const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) =
      >
        <ActionTitle>Task title</ActionTitle>
      </ActionItem>
-      <ActionItem
-        onClick={() => handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
-      >
-        <ActionTitle>Complete</ActionTitle>
-      </ActionItem>
    </ActionsList>
  );
 };
--- a/frontend/src/Projects/Project/Board/index.tsx
+++ b/frontend/src/Projects/Project/Board/index.tsx
@ -136,14 +136,14 @@ const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
  display: flex;
  align-items: center;
  font-size: 15px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});

  &:not(:last-of-type) {
    margin-right: 16px;
  }

  &:hover {
-    color: ${props => props.theme.colors.text.secondary};
+    color: rgba(${props => props.theme.colors.text.secondary});
  }
  ${props =>
    props.disabled &&
@ -280,7 +280,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
        cache =>
          produce(cache, draftCache => {
            draftCache.findProject.taskGroups = draftCache.findProject.taskGroups.filter(
-              (taskGroup: TaskGroup) => taskGroup.id !== deletedTaskGroupData.data?.deleteTaskGroup.taskGroup.id,
+              (taskGroup: TaskGroup) => taskGroup.id !== deletedTaskGroupData.data.deleteTaskGroup.taskGroup.id,
            );
          }),
        { projectID },
@ -296,12 +296,10 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
        cache =>
          produce(cache, draftCache => {
            const { taskGroups } = cache.findProject;
-            const idx = taskGroups.findIndex(taskGroup => taskGroup.id === newTaskData.data?.createTask.taskGroup.id);
+            const idx = taskGroups.findIndex(taskGroup => taskGroup.id === newTaskData.data.createTask.taskGroup.id);
            if (idx !== -1) {
-              if (newTaskData.data) {
              draftCache.findProject.taskGroups[idx].tasks.push({ ...newTaskData.data.createTask });
            }
-            }
          }),
        { projectID },
      );
@ -315,9 +313,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
        FindProjectDocument,
        cache =>
          produce(cache, draftCache => {
-            if (newTaskGroupData.data) {
            draftCache.findProject.taskGroups.push({ ...newTaskGroupData.data.createTaskGroup, tasks: [] });
-            }
          }),
        { projectID },
      );
@ -336,7 +332,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
        cache =>
          produce(cache, draftCache => {
            const idx = cache.findProject.taskGroups.findIndex(
-              t => t.id === resp.data?.deleteTaskGroupTasks.taskGroupID,
+              t => t.id === resp.data.deleteTaskGroupTasks.taskGroupID,
            );
            if (idx !== -1) {
              draftCache.findProject.taskGroups[idx].tasks = [];
@ -352,9 +348,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
        FindProjectDocument,
        cache =>
          produce(cache, draftCache => {
-            if (resp.data) {
            draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
-            }
          }),
        { projectID },
      );
@ -370,26 +364,21 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
        FindProjectDocument,
        cache =>
          produce(cache, draftCache => {
-            if (newTask.data) {
            const { previousTaskGroupID, task } = newTask.data.updateTaskLocation;
            if (previousTaskGroupID !== task.taskGroup.id) {
              const { taskGroups } = cache.findProject;
              const oldTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === previousTaskGroupID);
              const newTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === task.taskGroup.id);
              if (oldTaskGroupIdx !== -1 && newTaskGroupIdx !== -1) {
-                  const previousTask = cache.findProject.taskGroups[oldTaskGroupIdx].tasks.find(t => t.id === task.id);
                draftCache.findProject.taskGroups[oldTaskGroupIdx].tasks = taskGroups[oldTaskGroupIdx].tasks.filter(
                  (t: Task) => t.id !== task.id,
                );
-                  if (previousTask) {
                draftCache.findProject.taskGroups[newTaskGroupIdx].tasks = [
                  ...taskGroups[newTaskGroupIdx].tasks,
-                      { ...previousTask },
+                  { ...task },
                ];
              }
            }
-              }
-            }
          }),
        { projectID },
      );
@ -459,6 +448,9 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
    }
  };

+  if (loading) {
+    return <BoardLoading />;
+  }
  const getTaskStatusFilterLabel = (filter: TaskStatusFilter) => {
    if (filter.status === TaskStatus.COMPLETE) {
      return 'Complete';
@ -815,7 +807,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
    );
  }

-  return <BoardLoading />;
+  return <span>Error</span>;
 };

 export default ProjectBoard;
--- a/frontend/src/Projects/Project/Details/index.tsx
+++ b/frontend/src/Projects/Project/Details/index.tsx
@ -21,9 +21,6 @@ import {
  useCreateTaskChecklistItemMutation,
  FindTaskDocument,
  FindTaskQuery,
-  useCreateTaskCommentMutation,
-  useDeleteTaskCommentMutation,
-  useUpdateTaskCommentMutation,
 } from 'shared/generated/graphql';
 import { useCurrentUser } from 'App/context';
 import MiniProfile from 'shared/components/MiniProfile';
@ -36,73 +33,6 @@ import { useForm } from 'react-hook-form';
 import updateApolloCache from 'shared/utils/cache';
 import NOOP from 'shared/utils/noop';

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

                  optimisticResponse: {
                    __typename: 'Mutation',
@ -462,24 +324,20 @@ const Details: React.FC<DetailsProps> = ({
                  },
                });
              }}
-              onChecklistItemDrop={(prevChecklistID, taskChecklistID, checklistItem) => {
+              onChecklistItemDrop={(prevChecklistID, checklistID, checklistItem) => {
                updateTaskChecklistItemLocation({
-                  variables: {
-                    taskChecklistID,
-                    taskChecklistItemID: checklistItem.id,
-                    position: checklistItem.position,
-                  },
+                  variables: { checklistID, checklistItemID: checklistItem.id, position: checklistItem.position },
                  optimisticResponse: {
                    __typename: 'Mutation',
                    updateTaskChecklistItemLocation: {
                      __typename: 'UpdateTaskChecklistItemLocationPayload',
                      prevChecklistID,
-                      taskChecklistID,
+                      checklistID,
                      checklistItem: {
                        __typename: 'TaskChecklistItem',
                        position: checklistItem.position,
                        id: checklistItem.id,
-                        taskChecklistID,
+                        taskChecklistID: checklistID,
                      },
                    },
                  },
--- a/frontend/src/Projects/Project/LabelManagerEditor/index.tsx
+++ b/frontend/src/Projects/Project/LabelManagerEditor/index.tsx
@ -3,11 +3,32 @@ import updateApolloCache from 'shared/utils/cache';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import produce from 'immer';
 import {
+  useUpdateProjectMemberRoleMutation,
+  useCreateProjectMemberMutation,
+  useDeleteProjectMemberMutation,
+  useSetTaskCompleteMutation,
+  useToggleTaskLabelMutation,
+  useUpdateProjectNameMutation,
+  useFindProjectQuery,
+  useUpdateTaskGroupNameMutation,
+  useUpdateTaskNameMutation,
  useUpdateProjectLabelMutation,
+  useCreateTaskMutation,
  useDeleteProjectLabelMutation,
+  useDeleteTaskMutation,
+  useUpdateTaskLocationMutation,
+  useUpdateTaskGroupLocationMutation,
+  useCreateTaskGroupMutation,
+  useDeleteTaskGroupMutation,
+  useUpdateTaskDescriptionMutation,
+  useAssignTaskMutation,
+  DeleteTaskDocument,
  FindProjectDocument,
  useCreateProjectLabelMutation,
+  useUnassignTaskMutation,
+  useUpdateTaskDueDateMutation,
  FindProjectQuery,
+  useUsersQuery,
 } from 'shared/generated/graphql';
 import LabelManager from 'shared/components/PopupMenu/LabelManager';
 import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
@ -36,9 +57,7 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
        FindProjectDocument,
        cache =>
          produce(cache, draftCache => {
-            if (newLabelData.data) {
            draftCache.findProject.labels.push({ ...newLabelData.data.createProjectLabel });
-            }
          }),
        {
          projectID,
@ -55,7 +74,7 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
        cache =>
          produce(cache, draftCache => {
            draftCache.findProject.labels = cache.findProject.labels.filter(
-              label => label.id !== newLabelData.data?.deleteProjectLabel.id,
+              label => label.id !== newLabelData.data.deleteProjectLabel.id,
            );
          }),
        { projectID },
--- a/frontend/src/Projects/Project/index.tsx
+++ b/frontend/src/Projects/Project/index.tsx
@ -3,7 +3,6 @@ import React, { useState, useRef, useEffect, useContext } from 'react';
 import updateApolloCache from 'shared/utils/cache';
 import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
 import styled from 'styled-components/macro';
-import AsyncSelect from 'react-select/async';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import {
  useParams,
@ -16,12 +15,11 @@ import {
 } from 'react-router-dom';
 import {
  useUpdateProjectMemberRoleMutation,
-  useInviteProjectMembersMutation,
+  useCreateProjectMemberMutation,
  useDeleteProjectMemberMutation,
  useToggleTaskLabelMutation,
  useUpdateProjectNameMutation,
  useFindProjectQuery,
-  useDeleteInvitedProjectMemberMutation,
  useUpdateTaskNameMutation,
  useCreateTaskMutation,
  useDeleteTaskMutation,
@ -32,27 +30,19 @@ import {
  FindProjectDocument,
  FindProjectQuery,
 } from 'shared/generated/graphql';
+
 import produce from 'immer';
 import UserContext, { useCurrentUser } from 'App/context';
 import Input from 'shared/components/Input';
 import Member from 'shared/components/Member';
 import EmptyBoard from 'shared/components/EmptyBoard';
 import NOOP from 'shared/utils/noop';
-import { Lock, Cross } from 'shared/icons';
-import Button from 'shared/components/Button';
-import { useApolloClient } from '@apollo/react-hooks';
-import TaskAssignee from 'shared/components/TaskAssignee';
-import gql from 'graphql-tag';
-import { colourStyles } from 'shared/components/Select';
 import Board, { BoardLoading } from './Board';
 import Details from './Details';
 import LabelManagerEditor from './LabelManagerEditor';
-import { mixin } from '../../shared/utils/styles';

 const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';

-const RFC2822_EMAIL = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
-
 const useStateWithLocalStorage = (localStorageKey: string): [string, React.Dispatch<React.SetStateAction<string>>] => {
  const [value, setValue] = React.useState<string>(localStorage.getItem(localStorageKey) || '');

@ -71,7 +61,7 @@ const UserMember = styled(Member)`
  padding: 4px 0;
  cursor: pointer;
  &:hover {
-    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+    background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
  }
  border-radius: 6px;
 `;
@ -80,293 +70,29 @@ const MemberList = styled.div`
  margin: 8px 0;
 `;

-type InviteUserData = {
-  email?: string;
-  suerID?: string;
-};
 type UserManagementPopupProps = {
-  projectID: string;
  users: Array<User>;
  projectMembers: Array<TaskUser>;
-  onInviteProjectMembers: (data: Array<InviteUserData>) => void;
+  onAddProjectMember: (userID: string) => void;
 };

-const VisibiltyPrivateIcon = styled(Lock)`
-  padding-right: 4px;
-`;
-
-const VisibiltyButtonText = styled.span`
-  color: rgba(${props => props.theme.colors.text.primary});
-`;
-
-const ShareActions = styled.div`
-  border-top: 1px solid #414561;
-  margin-top: 8px;
-  padding-top: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const VisibiltyButton = styled.button`
-  cursor: pointer;
-  margin: 2px 4px;
-  padding: 2px 4px;
-  align-items: center;
-  justify-content: center;
-  border-bottom: 1px solid transparent;
-  &:hover ${VisibiltyButtonText} {
-    color: rgba(${props => props.theme.colors.text.secondary});
-  }
-  &:hover ${VisibiltyPrivateIcon} {
-    fill: rgba(${props => props.theme.colors.text.secondary});
-    stroke: rgba(${props => props.theme.colors.text.secondary});
-  }
-  &:hover {
-    border-bottom: 1px solid rgba(${props => props.theme.colors.primary});
-  }
-`;
-
-type MemberFilterOptions = {
-  projectID?: null | string;
-  teamID?: null | string;
-  organization?: boolean;
-};
-
-const fetchMembers = async (client: any, projectID: string, options: MemberFilterOptions, input: string, cb: any) => {
-  if (input && input.trim().length < 3) {
-    return [];
-  }
-  const res = await client.query({
-    query: gql`
-    query {
-      searchMembers(input: {searchFilter:"${input}", projectID:"${projectID}"}) {
-        id
-        similarity
-        status
-        user {
-          id
-          fullName
-          email
-          profileIcon {
-            url
-            initials
-            bgColor
-          }
-        }
-      }
-    }
-    `,
-  });
-
-  let results: any = [];
-  const emails: Array<string> = [];
-  if (res.data && res.data.searchMembers) {
-    results = [
-      ...res.data.searchMembers.map((m: any) => {
-        if (m.status === 'INVITED') {
-          return {
-            label: m.id,
-            value: {
-              id: m.id,
-              type: 2,
-              profileIcon: {
-                bgColor: '#ccc',
-                initials: m.id.charAt(0),
-              },
-            },
-          };
-        }
-
-        emails.push(m.user.email);
-        return {
-          label: m.user.fullName,
-          value: { id: m.user.id, type: 0, profileIcon: m.user.profileIcon },
-        };
-      }),
-    ];
-  }
-
-  if (RFC2822_EMAIL.test(input) && !emails.find(e => e === input)) {
-    results = [
-      ...results,
-      {
-        label: input,
-        value: {
-          id: input,
-          type: 1,
-          profileIcon: {
-            bgColor: '#ccc',
-            initials: input.charAt(0),
-          },
-        },
-      },
-    ];
-  }
-
-  return results;
-};
-
-type UserOptionProps = {
-  innerProps: any;
-  isDisabled: boolean;
-  isFocused: boolean;
-  label: string;
-  data: any;
-  getValue: any;
-};
-
-const OptionWrapper = styled.div<{ isFocused: boolean }>`
-  cursor: pointer;
-  padding: 4px 8px;
-  ${props => props.isFocused && `background: rgba(${props.theme.colors.primary});`}
-  display: flex;
-  align-items: center;
-`;
-const OptionContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 12px;
-`;
-
-const OptionLabel = styled.span<{ fontSize: number; quiet: boolean }>`
-  display: flex;
-  align-items: center;
-  font-size: ${p => p.fontSize}px;
-  color: rgba(${p => (p.quiet ? p.theme.colors.text.primary : p.theme.colors.text.primary)});
-`;
-
-const UserOption: React.FC<UserOptionProps> = ({ isDisabled, isFocused, innerProps, label, data }) => {
-  return !isDisabled ? (
-    <OptionWrapper {...innerProps} isFocused={isFocused}>
-      <TaskAssignee
-        size={32}
-        member={{
-          id: '',
-          fullName: data.value.label,
-          profileIcon: data.value.profileIcon,
-        }}
-      />
-      <OptionContent>
-        <OptionLabel fontSize={16} quiet={false}>
-          {label}
-        </OptionLabel>
-        {data.value.type === 2 && (
-          <OptionLabel fontSize={14} quiet>
-            Joined
-          </OptionLabel>
-        )}
-      </OptionContent>
-    </OptionWrapper>
-  ) : null;
-};
-
-const OptionValueWrapper = styled.div`
-  background: rgba(${props => props.theme.colors.bg.primary});
-  border-radius: 4px;
-  margin: 2px;
-  padding: 3px 6px 3px 4px;
-  display: flex;
-  align-items: center;
-`;
-
-const OptionValueLabel = styled.span`
-  font-size: 12px;
-  color: rgba(${props => props.theme.colors.text.secondary});
-`;
-
-const OptionValueRemove = styled.button`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  margin-left: 4px;
-`;
-const OptionValue = ({ data, removeProps }: any) => {
-  return (
-    <OptionValueWrapper>
-      <OptionValueLabel>{data.label}</OptionValueLabel>
-      <OptionValueRemove {...removeProps}>
-        <Cross width={14} height={14} />
-      </OptionValueRemove>
-    </OptionValueWrapper>
-  );
-};
-
-const InviteButton = styled(Button)`
-  margin-top: 12px;
-  height: 32px;
-  padding: 4px 12px;
-  width: 100%;
-  justify-content: center;
-`;
-
-const InviteContainer = styled.div`
-  min-height: 300px;
-  display: flex;
-  flex-direction: column;
-`;
-
-const UserManagementPopup: React.FC<UserManagementPopupProps> = ({
-  projectID,
-  users,
-  projectMembers,
-  onInviteProjectMembers,
-}) => {
-  const client = useApolloClient();
-  const [invitedUsers, setInvitedUsers] = useState<Array<any> | null>(null);
+const UserManagementPopup: React.FC<UserManagementPopupProps> = ({ users, projectMembers, onAddProjectMember }) => {
  return (
    <Popup tab={0} title="Invite a user">
-      <InviteContainer>
-        <AsyncSelect
-          getOptionValue={option => option.value.id}
-          placeholder="Email address or username"
-          noOptionsMessage={() => null}
-          onChange={(e: any) => {
-            setInvitedUsers(e);
-          }}
-          isMulti
-          autoFocus
-          cacheOptions
-          styles={colourStyles}
-          defaultOption
-          components={{
-            MultiValue: OptionValue,
-            Option: UserOption,
-            IndicatorSeparator: null,
-            DropdownIndicator: null,
-          }}
-          loadOptions={(i, cb) => fetchMembers(client, projectID, {}, i, cb)}
+      <SearchInput width="100%" variant="alternate" placeholder="Email address or name" name="search" />
+      <MemberList>
+        {users
+          .filter(u => u.id !== projectMembers.find(p => p.id === u.id)?.id)
+          .map(user => (
+            <UserMember
+              key={user.id}
+              onCardMemberClick={() => onAddProjectMember(user.id)}
+              showName
+              member={user}
+              taskID=""
            />
-      </InviteContainer>
-      <InviteButton
-        onClick={() => {
-          if (invitedUsers) {
-            onInviteProjectMembers(
-              invitedUsers.map(user => {
-                if (user.value.type === 0) {
-                  return {
-                    userID: user.value.id,
-                  };
-                }
-                return {
-                  email: user.value.id,
-                };
-              }),
-            );
-          }
-        }}
-        disabled={invitedUsers === null}
-        hoverVariant="none"
-        fontSize="16px"
-      >
-        Send Invite
-      </InviteButton>
+          ))}
+      </MemberList>
    </Popup>
  );
 };
@ -409,34 +135,12 @@ const Project = () => {
  const [value, setValue] = useStateWithLocalStorage(CARD_LABEL_VARIANT_STORAGE_KEY);
  const [updateProjectMemberRole] = useUpdateProjectMemberRoleMutation();

-  const [deleteTask] = useDeleteTaskMutation({
-    update: (client, resp) =>
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            if (resp.data) {
-              const taskGroupIdx = draftCache.findProject.taskGroups.findIndex(
-                tg => tg.tasks.findIndex(t => t.id === resp.data?.deleteTask.taskID) !== -1,
-              );
-
-              if (taskGroupIdx !== -1) {
-                draftCache.findProject.taskGroups[taskGroupIdx].tasks = cache.findProject.taskGroups[
-                  taskGroupIdx
-                ].tasks.filter(t => t.id !== resp.data?.deleteTask.taskID);
-              }
-            }
-          }),
-        { projectID },
-      ),
-  });
+  const [deleteTask] = useDeleteTaskMutation();

  const [updateTaskName] = useUpdateTaskNameMutation();

-  const { loading, data, error } = useFindProjectQuery({
+  const { loading, data } = useFindProjectQuery({
    variables: { projectID },
-    pollInterval: 3000,
  });

  const [updateProjectName] = useUpdateProjectNameMutation({
@ -446,45 +150,21 @@ const Project = () => {
        FindProjectDocument,
        cache =>
          produce(cache, draftCache => {
-            draftCache.findProject.name = newName.data?.updateProjectName.name ?? '';
+            draftCache.findProject.name = newName.data.updateProjectName.name;
          }),
        { projectID },
      );
    },
  });

-  const [inviteProjectMembers] = useInviteProjectMembersMutation({
+  const [createProjectMember] = useCreateProjectMemberMutation({
    update: (client, response) => {
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
        cache =>
          produce(cache, draftCache => {
-            if (response.data) {
-              draftCache.findProject.members = [
-                ...cache.findProject.members,
-                ...response.data.inviteProjectMembers.members,
-              ];
-              draftCache.findProject.invitedMembers = [
-                ...cache.findProject.invitedMembers,
-                ...response.data.inviteProjectMembers.invitedMembers,
-              ];
-            }
-          }),
-        { projectID },
-      );
-    },
-  });
-  const [deleteInvitedProjectMember] = useDeleteInvitedProjectMemberMutation({
-    update: (client, response) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.invitedMembers = cache.findProject.invitedMembers.filter(
-              m => m.email !== response.data?.deleteInvitedProjectMember.invitedMember.email ?? '',
-            );
+            draftCache.findProject.members.push({ ...response.data.createProjectMember.member });
          }),
        { projectID },
      );
@ -498,7 +178,7 @@ const Project = () => {
        cache =>
          produce(cache, draftCache => {
            draftCache.findProject.members = cache.findProject.members.filter(
-              m => m.id !== response.data?.deleteProjectMember.member.id,
+              m => m.id !== response.data.deleteProjectMember.member.id,
            );
          }),
        { projectID },
@ -517,8 +197,13 @@ const Project = () => {
      document.title = `${data.findProject.name} | Taskcafé`;
    }
  }, [data]);
-  if (error) {
-    history.push('/projects');
+  if (loading) {
+    return (
+      <>
+        <GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
+        <BoardLoading />
+      </>
+    );
  }
  if (data) {
    labelsRef.current = data.findProject.labels;
@ -536,10 +221,6 @@ const Project = () => {
            deleteProjectMember({ variables: { userID, projectID } });
            hidePopup();
          }}
-          onRemoveInvitedFromBoard={email => {
-            deleteInvitedProjectMember({ variables: { projectID, email } });
-            hidePopup();
-          }}
          onSaveProjectName={projectName => {
            updateProjectName({ variables: { projectID, name: projectName } });
          }}
@ -547,10 +228,8 @@ const Project = () => {
            showPopup(
              $target,
              <UserManagementPopup
-                projectID={projectID}
-                onInviteProjectMembers={members => {
-                  inviteProjectMembers({ variables: { projectID, members } });
-                  hidePopup();
+                onAddProjectMember={userID => {
+                  createProjectMember({ variables: { userID, projectID } });
                }}
                users={data.users}
                projectMembers={data.findProject.members}
@ -561,9 +240,8 @@ const Project = () => {
          menuType={[{ name: 'Board', link: location.pathname }]}
          currentTab={0}
          projectMembers={data.findProject.members}
-          projectInvitedMembers={data.findProject.invitedMembers}
          projectID={projectID}
-          teamID={data.findProject.team ? data.findProject.team.id : null}
+          teamID={data.findProject.team.id}
          name={data.findProject.name}
        />
        <Route path={`${match.path}`} exact render={() => <Redirect to={`${match.url}/board`} />} />
@ -606,7 +284,6 @@ const Project = () => {
              }}
              onDeleteTask={deletedTask => {
                deleteTask({ variables: { taskID: deletedTask.id } });
-                history.push(`${match.url}/board`);
              }}
              onOpenAddLabelPopup={(task, $targetRef) => {
                taskLabelsRef.current = task.labels;
@ -629,12 +306,7 @@ const Project = () => {
      </>
    );
  }
-  return (
-    <>
-      <GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
-      <BoardLoading />
-    </>
-  );
+  return <div>Error</div>;
 };

 export default Project;
--- a/frontend/src/Projects/index.tsx
+++ b/frontend/src/Projects/index.tsx
@ -20,8 +20,33 @@ import Input from 'shared/components/Input';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
 import NOOP from 'shared/utils/noop';
-import theme from 'App/ThemeStyles';
-import { mixin } from '../shared/utils/styles';
+
+const EmptyStateContent = styled.div`
+  display: flex;
+  justy-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const EmptyStateTitle = styled.h3`
+  color: #fff;
+  font-size: 18px;
+`;
+
+const EmptyStatePrompt = styled.span`
+  color: rgba(${props => props.theme.colors.text.primary});
+  font-size: 16px;
+  margin-top: 8px;
+`;
+
+const EmptyState = styled(Empty)`
+  display: block;
+  margin: 0 auto;
+`;
+
+const CreateTeamButton = styled(Button)`
+  width: 100%;
+`;

 type CreateTeamData = { teamName: string };

@ -31,10 +56,6 @@ type CreateTeamFormProps = {

 const CreateTeamFormContainer = styled.form``;

-const CreateTeamButton = styled(Button)`
-  width: 100%;
-`;
-
 const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
  const { register, handleSubmit } = useForm<CreateTeamData>();
  const createTeam = (data: CreateTeamData) => {
@ -56,7 +77,7 @@ const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
 };

 const ProjectAddTile = styled.div`
-  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+  background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
  background-size: cover;
  background-position: 50%;
  color: #fff;
@ -178,7 +199,7 @@ const SectionActionLink = styled(Link)`

 const ProjectSectionTitle = styled.h3`
  font-size: 16px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;

 const ProjectsContainer = styled.div`
@ -188,6 +209,13 @@ const ProjectsContainer = styled.div`
  min-width: 288px;
 `;

+const ProjectGrid = styled.div`
+  max-width: 780px;
+  display: grid;
+  grid-template-columns: 240px 240px 240px;
+  gap: 20px 10px;
+`;
+
 const AddTeamButton = styled(Button)`
  padding: 6px 12px;
  position: absolute;
@ -195,6 +223,10 @@ const AddTeamButton = styled(Button)`
  right: 12px;
 `;

+const CreateFirstTeam = styled(Button)`
+  margin-top: 8px;
+`;
+
 type ShowNewProject = {
  open: boolean;
  initialTeamID: null | string;
@ -202,7 +234,7 @@ type ShowNewProject = {

 const Projects = () => {
  const { showPopup, hidePopup } = usePopup();
-  const { loading, data } = useGetProjectsQuery({ pollInterval: 3000, fetchPolicy: 'cache-and-network' });
+  const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'network-only' });
  useEffect(() => {
    document.title = 'Taskcafé';
  }, []);
@ -210,9 +242,7 @@ const Projects = () => {
    update: (client, newProject) => {
      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
        produce(cache, draftCache => {
-          if (newProject.data) {
          draftCache.projects.push({ ...newProject.data.createProject });
-          }
        }),
      );
    },
@ -224,25 +254,23 @@ const Projects = () => {
    update: (client, createData) => {
      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
        produce(cache, draftCache => {
-          if (createData.data) {
-            draftCache.teams.push({ ...createData.data?.createTeam });
-          }
+          draftCache.teams.push({ ...createData.data.createTeam });
        }),
      );
    },
  });
+  if (loading) {
+    return (
+      <>
+        <span>loading</span>
+      </>
+    );
+  }

-  const colors = theme.colors.multiColors;
+  const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
  if (data && user) {
    const { projects, teams, organizations } = data;
    const organizationID = organizations[0].id ?? null;
-    const personalProjects = projects
-      .filter(p => p.team === null)
-      .sort((a, b) => {
-        const textA = a.name.toUpperCase();
-        const textB = b.name.toUpperCase();
-        return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
-      });
    const projectTeams = teams
      .sort((a, b) => {
        const textA = a.name.toUpperCase();
@ -254,7 +282,7 @@ const Projects = () => {
          id: team.id,
          name: team.name,
          projects: projects
-            .filter(project => project.team && project.team.id === team.id)
+            .filter(project => project.team.id === team.id)
            .sort((a, b) => {
              const textA = a.name.toUpperCase();
              const textB = b.name.toUpperCase();
@ -295,35 +323,39 @@ const Projects = () => {
                Add Team
              </AddTeamButton>
            )}
-            <div>
-              <ProjectSectionTitleWrapper>
-                <ProjectSectionTitle>Personal Projects</ProjectSectionTitle>
-              </ProjectSectionTitleWrapper>
-              <ProjectList>
-                {personalProjects.map((project, idx) => (
-                  <ProjectListItem key={project.id}>
-                    <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
-                      <ProjectTileFade />
-                      <ProjectTileDetails>
-                        <ProjectTileName>{project.name}</ProjectTileName>
-                      </ProjectTileDetails>
-                    </ProjectTile>
-                  </ProjectListItem>
-                ))}
-                <ProjectListItem>
-                  <ProjectAddTile
-                    onClick={() => {
-                      setShowNewProject({ open: true, initialTeamID: 'no-team' });
+            {projectTeams.length === 0 && (
+              <EmptyStateContent>
+                <EmptyState width={425} height={425} />
+                <EmptyStateTitle>No teams exist</EmptyStateTitle>
+                <EmptyStatePrompt>Create a new team to get started</EmptyStatePrompt>
+                <CreateFirstTeam
+                  variant="outline"
+                  onClick={$target => {
+                    showPopup(
+                      $target,
+                      <Popup
+                        title="Create team"
+                        tab={0}
+                        onClose={() => {
+                          hidePopup();
                        }}
                      >
-                    <ProjectTileFade />
-                    <ProjectAddTileDetails>
-                      <ProjectTileName centered>Create new project</ProjectTileName>
-                    </ProjectAddTileDetails>
-                  </ProjectAddTile>
-                </ProjectListItem>
-              </ProjectList>
-            </div>
+                        <CreateTeamForm
+                          onCreateTeam={teamName => {
+                            if (organizationID) {
+                              createTeam({ variables: { name: teamName, organizationID } });
+                              hidePopup();
+                            }
+                          }}
+                        />
+                      </Popup>,
+                    );
+                  }}
+                >
+                  Create new team
+                </CreateFirstTeam>
+              </EmptyStateContent>
+            )}
            {projectTeams.map(team => {
              return (
                <div key={team.id}>
@ -377,7 +409,7 @@ const Projects = () => {
                initialTeamID={showNewProject.initialTeamID}
                onCreateProject={(name, teamID) => {
                  if (user) {
-                    createProject({ variables: { teamID, name } });
+                    createProject({ variables: { teamID, name, userID: user.id } });
                    setShowNewProject({ open: false, initialTeamID: null });
                  }
                }}
@ -392,7 +424,7 @@ const Projects = () => {
      </>
    );
  }
-  return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
+  return <div>Error!</div>;
 };

 export default Projects;
--- a/frontend/src/Register/Styles.ts
+++ b/frontend/src/Register/Styles.ts
@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-`;
-
-export const LoginWrapper = styled.div`
-  width: 60%;
-`;
--- a/frontend/src/Register/index.tsx
+++ b/frontend/src/Register/index.tsx
@ -1,62 +0,0 @@
-import React, { useState } from 'react';
-import axios from 'axios';
-import Register from 'shared/components/Register';
-import { useHistory, useLocation } from 'react-router';
-import * as QueryString from 'query-string';
-import { toast } from 'react-toastify';
-import { Container, LoginWrapper } from './Styles';
-
-const UsersRegister = () => {
-  const history = useHistory();
-  const location = useLocation();
-  const [registered, setRegistered] = useState(false);
-  const params = QueryString.parse(location.search);
-  return (
-    <Container>
-      <LoginWrapper>
-        <Register
-          registered={registered}
-          onSubmit={(data, setComplete, setError) => {
-            if (data.password !== data.password_confirm) {
-              setError('password', { type: 'error', message: 'Passwords must match' });
-              setError('password_confirm', { type: 'error', message: 'Passwords must match' });
-            } else {
-              // TODO: change to fetch?
-              fetch('/auth/register', {
-                method: 'POST',
-                body: JSON.stringify({
-                  user: {
-                    username: data.username,
-                    roleCode: 'admin',
-                    email: data.email,
-                    password: data.password,
-                    initials: data.initials,
-                    fullname: data.fullname,
-                  },
-                }),
-              })
-                .then(async x => {
-                  const response = await x.json();
-                  const { setup } = response;
-                  console.log(response);
-                  if (setup) {
-                    history.replace(`/confirm?confirmToken=xxxx`);
-                  } else if (params.confirmToken) {
-                    history.replace(`/confirm?confirmToken=${params.confirmToken}`);
-                  } else {
-                    setRegistered(true);
-                  }
-                })
-                .catch(() => {
-                  toast('There was an issue trying to register');
-                });
-            }
-            setComplete(true);
-          }}
-        />
-      </LoginWrapper>
-    </Container>
-  );
-};
-
-export default UsersRegister;
--- a/frontend/src/Teams/Members/index.tsx
+++ b/frontend/src/Teams/Members/index.tsx
@ -21,7 +21,6 @@ import TaskAssignee from 'shared/components/TaskAssignee';
 import Member from 'shared/components/Member';
 import ControlledInput from 'shared/components/ControlledInput';
 import NOOP from 'shared/utils/noop';
-import { mixin } from 'shared/utils/styles';

 const MemberListWrapper = styled.div`
  flex: 1 1;
@ -35,7 +34,7 @@ const UserMember = styled(Member)`
  padding: 4px 0;
  cursor: pointer;
  &:hover {
-    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+    background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
  }
  border-radius: 6px;
 `;
@ -120,12 +119,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
      ? css`
          user-select: none;
          pointer-events: none;
-          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
+          color: rgba(${props.theme.colors.text.primary}, 0.4);
        `
      : css`
          cursor: pointer;
          &:hover {
-            background: ${props.theme.colors.primary};
+            background: rgb(115, 103, 240);
          }
        `}
 `;
@ -136,7 +135,7 @@ export const Content = styled.div`

 export const CurrentPermission = styled.span`
  margin-left: 4px;
-  color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
 `;

 export const Separator = styled.div`
@ -147,13 +146,13 @@ export const Separator = styled.div`

 export const WarningText = styled.span`
  display: flex;
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
  padding: 6px;
 `;

 export const DeleteDescription = styled.div`
  font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;

 export const RemoveMemberButton = styled(Button)`
@ -306,14 +305,14 @@ const MemberItemOption = styled(Button)`
 `;

 const MemberList = styled.div`
-  border-top: 1px solid ${props => props.theme.colors.border};
+  border-top: 1px solid rgba(${props => props.theme.colors.border});
 `;

 const MemberListItem = styled.div`
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
-  border-bottom: 1px solid ${props => props.theme.colors.border};
+  border-bottom: 1px solid rgba(${props => props.theme.colors.border});
  min-height: 40px;
  padding: 12px 0 12px 40px;
  position: relative;
@ -337,11 +336,11 @@ const MemberProfile = styled(TaskAssignee)`
 `;

 const MemberItemName = styled.p`
-  color: ${props => props.theme.colors.text.secondary};
+  color: rgba(${props => props.theme.colors.text.secondary});
 `;

 const MemberItemUsername = styled.p`
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;

 const MemberListHeader = styled.div`
@ -350,12 +349,12 @@ const MemberListHeader = styled.div`
 `;
 const ListTitle = styled.h3`
  font-size: 18px;
-  color: ${props => props.theme.colors.text.secondary};
+  color: rgba(${props => props.theme.colors.text.secondary});
  margin-bottom: 12px;
 `;
 const ListDesc = styled.span`
  font-size: 16px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;
 const FilterSearch = styled(Input)`
  margin: 0;
@ -387,11 +386,11 @@ const FilterTabItem = styled.li`
  font-weight: 700;
  text-decoration: none;
  padding: 6px 8px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
  &:hover {
    border-radius: 6px;
-    background: ${props => props.theme.colors.primary};
-    color: ${props => props.theme.colors.text.secondary};
+    background: rgba(${props => props.theme.colors.primary});
+    color: rgba(${props => props.theme.colors.text.secondary});
  }
 `;

@ -419,11 +418,7 @@ type MembersProps = {

 const Members: React.FC<MembersProps> = ({ teamID }) => {
  const { showPopup, hidePopup } = usePopup();
-  const { loading, data } = useGetTeamQuery({
-    variables: { teamID },
-    fetchPolicy: 'cache-and-network',
-    pollInterval: 3000,
-  });
+  const { loading, data } = useGetTeamQuery({ variables: { teamID } });
  const { user, setUserRoles } = useCurrentUser();
  const warning =
    'You can’t leave because you are the only admin. To make another user an admin, click their avatar, select “Change permissions…”, and select “Admin”.';
@ -434,13 +429,11 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
        GetTeamDocument,
        cache =>
          produce(cache, draftCache => {
-            if (response.data) {
            draftCache.findTeam.members.push({
              ...response.data.createTeamMember.teamMember,
              member: { __typename: 'MemberList', projects: [], teams: [] },
              owned: { __typename: 'OwnedList', projects: [], teams: [] },
            });
-            }
          }),
        { teamID },
      );
@ -465,13 +458,16 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
        cache =>
          produce(cache, draftCache => {
            draftCache.findTeam.members = cache.findTeam.members.filter(
-              member => member.id !== response.data?.deleteTeamMember.userID,
+              member => member.id !== response.data.deleteTeamMember.userID,
            );
          }),
        { teamID },
      );
    },
  });
+  if (loading) {
+    return <span>loading</span>;
+  }

  if (data && user) {
    return (
@ -559,7 +555,7 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
    );
  }

-  return <div>loading</div>;
+  return <div>error</div>;
 };

 export default Members;
--- a/frontend/src/Teams/Projects/index.tsx
+++ b/frontend/src/Teams/Projects/index.tsx
@ -8,7 +8,6 @@ import {
 } from 'shared/generated/graphql';
 import { Link } from 'react-router-dom';
 import Input from 'shared/components/Input';
-import theme from 'App/ThemeStyles';

 const FilterSearch = styled(Input)`
  margin: 0;
@ -35,11 +34,11 @@ const FilterTabItem = styled.li`
  font-weight: 700;
  text-decoration: none;
  padding: 6px 8px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
  &:hover {
    border-radius: 6px;
-    background: ${props => props.theme.colors.primary};
-    color: ${props => props.theme.colors.text.secondary};
+    background: rgba(${props => props.theme.colors.primary});
+    color: rgba(${props => props.theme.colors.text.secondary});
  }
 `;

@ -56,7 +55,7 @@ const FilterTabTitle = styled.h2`
 `;

 const ProjectAddTile = styled.div`
-  background-color: ${props => props.theme.colors.bg.primary};
+  background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
  background-size: cover;
  background-position: 50%;
  color: #fff;
@ -148,18 +147,17 @@ const ProjectListWrapper = styled.div`
  flex: 1 1;
 `;

-const colors = theme.colors.multiColors;
+const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];

 type TeamProjectsProps = {
  teamID: string;
 };

 const TeamProjects: React.FC<TeamProjectsProps> = ({ teamID }) => {
-  const { loading, data } = useGetTeamQuery({
-    variables: { teamID },
-    fetchPolicy: 'cache-and-network',
-    pollInterval: 3000,
-  });
+  const { loading, data } = useGetTeamQuery({ variables: { teamID } });
+  if (loading) {
+    return <span>loading</span>;
+  }
  if (data) {
    return (
      <ProjectsContainer>
@ -190,7 +188,7 @@ const TeamProjects: React.FC<TeamProjectsProps> = ({ teamID }) => {
      </ProjectsContainer>
    );
  }
-  return <span>loading</span>;
+  return <span>error</span>;
 };

 export default TeamProjects;
--- a/frontend/src/Teams/index.tsx
+++ b/frontend/src/Teams/index.tsx
@ -33,7 +33,7 @@ const Wrapper = styled.div`
 `;

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

 export default Teams;
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@ -8,28 +8,15 @@ import { HttpLink } from 'apollo-link-http';
 import { onError } from 'apollo-link-error';
 import { enableMapSet } from 'immer';
 import { ApolloLink, Observable, fromPromise } from 'apollo-link';
-import dayjs from 'dayjs';
-import updateLocale from 'dayjs/plugin/updateLocale';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import isBetween from 'dayjs/plugin/isBetween';
-import weekday from 'dayjs/plugin/weekday';
+import moment from 'moment';
 import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
 import cache from './App/cache';
 import App from './App';

 // https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
-
-dayjs.extend(isSameOrAfter);
-
-dayjs.extend(weekday);
-dayjs.extend(isBetween);
-dayjs.extend(customParseFormat);
 enableMapSet();

-dayjs.extend(updateLocale);
-
-dayjs.updateLocale('en', {
+moment.updateLocale('en', {
  week: {
    dow: 1, // First day of week is Monday
    doy: 7, // First week of year must contain 1 January (7 + 1 - 1)
--- a/frontend/src/outline.d.ts
+++ b/frontend/src/outline.d.ts
--- a/frontend/src/shared/components/AddList/AddList.stories.tsx
+++ b/frontend/src/shared/components/AddList/AddList.stories.tsx
@ -1,6 +1,5 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import theme from 'App/ThemeStyles';
 import AddList from '.';

 export default {
@ -8,7 +7,7 @@ export default {
  title: 'AddList',
  parameters: {
    backgrounds: [
-      { name: 'gray', value: theme.colors.bg.secondary, default: true },
+      { name: 'gray', value: '#262c49', default: true },
      { name: 'white', value: '#ffffff' },
    ],
  },
--- a/frontend/src/shared/components/AddList/Styles.ts
+++ b/frontend/src/shared/components/AddList/Styles.ts
@ -67,7 +67,7 @@ export const ListNameEditorWrapper = styled.div`
  display: flex;
 `;
 export const ListNameEditor = styled(TextareaAutosize)`
-  background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
+  background-color: ${props => mixin.lighten('#262c49', 0.05)};
  border: none;
  box-shadow: inset 0 0 0 2px #0079bf;
  transition: margin 85ms ease-in, background 85ms ease-in;
@ -91,7 +91,7 @@ export const ListNameEditor = styled(TextareaAutosize)`

  color: #c2c6dc;
  l &:focus {
-    background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
+    background-color: ${props => mixin.lighten('#262c49', 0.05)};
  }
 `;

--- a/frontend/src/shared/components/Admin/Admin.stories.tsx
+++ b/frontend/src/shared/components/Admin/Admin.stories.tsx
@ -51,9 +51,7 @@ export const Default = () => {
              },
            },
          ]}
-          invitedUsers={[]}
          onAddUser={action('add user')}
-          onDeleteInvitedUser={action('delete invited user')}
        />
      </ThemeProvider>
    </>
--- a/frontend/src/shared/components/Admin/index.tsx
+++ b/frontend/src/shared/components/Admin/index.tsx
@ -8,7 +8,6 @@ import { RoleCode, useUpdateUserRoleMutation } from 'shared/generated/graphql';
 import Input from 'shared/components/Input';
 import Button from 'shared/components/Button';
 import NOOP from 'shared/utils/noop';
-import { mixin } from 'shared/utils/styles';

 export const RoleCheckmark = styled(Checkmark)`
  padding-left: 4px;
@ -59,12 +58,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
      ? css`
          user-select: none;
          pointer-events: none;
-          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
+          color: rgba(${props.theme.colors.text.primary}, 0.4);
        `
      : css`
          cursor: pointer;
          &:hover {
-            background: ${props.theme.colors.primary};
+            background: rgb(115, 103, 240);
          }
        `}
 `;
@ -75,7 +74,7 @@ export const Content = styled.div`

 export const CurrentPermission = styled.span`
  margin-left: 4px;
-  color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
 `;

 export const Separator = styled.div`
@ -86,13 +85,13 @@ export const Separator = styled.div`

 export const WarningText = styled.span`
  display: flex;
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
  padding: 6px;
 `;

 export const DeleteDescription = styled.div`
  font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;

 export const RemoveMemberButton = styled(Button)`
@ -105,8 +104,8 @@ type TeamRoleManagerPopupProps = {
  user: User;
  users: Array<User>;
  warning?: string | null;
-  canChangeRole?: boolean;
-  onChangeRole?: (roleCode: RoleCode) => void;
+  canChangeRole: boolean;
+  onChangeRole: (roleCode: RoleCode) => void;
  updateUserPassword?: (user: TaskUser, password: string) => void;
  onDeleteUser?: (userID: string, newOwnerID: string | null) => void;
 };
@ -334,14 +333,14 @@ const MemberItemOption = styled(Button)`
 `;

 const MemberList = styled.div`
-  border-top: 1px solid ${props => props.theme.colors.border};
+  border-top: 1px solid rgba(${props => props.theme.colors.border});
 `;

 const MemberListItem = styled.div`
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
-  border-bottom: 1px solid ${props => props.theme.colors.border};
+  border-bottom: 1px solid rgba(${props => props.theme.colors.border});
  min-height: 40px;
  padding: 12px 0 12px 40px;
  position: relative;
@ -365,11 +364,11 @@ const MemberProfile = styled(TaskAssignee)`
 `;

 const MemberItemName = styled.p`
-  color: ${props => props.theme.colors.text.secondary};
+  color: rgba(${props => props.theme.colors.text.secondary});
 `;

 const MemberItemUsername = styled.p`
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;

 const MemberListHeader = styled.div`
@ -378,12 +377,12 @@ const MemberListHeader = styled.div`
 `;
 const ListTitle = styled.h3`
  font-size: 18px;
-  color: ${props => props.theme.colors.text.secondary};
+  color: rgba(${props => props.theme.colors.text.secondary});
  margin-bottom: 12px;
 `;
 const ListDesc = styled.span`
  font-size: 16px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;
 const FilterSearch = styled(Input)`
  margin: 0;
@ -444,17 +443,17 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
  width: 100%;
  position: relative;

-  color: ${props => (props.active ? `${props.theme.colors.secondary}` : props.theme.colors.text.primary)};
+  color: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')};
  &:hover {
-    color: ${props => `${props.theme.colors.primary}`};
+    color: rgba(115, 103, 240);
  }
  &:hover svg {
-    fill: ${props => props.theme.colors.primary};
+    fill: rgba(115, 103, 240);
  }
 `;
 const TabItemUser = styled(User)<{ active: boolean }>`
-fill: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
-stroke: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
+fill: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
+stroke: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
 `;

 const TabNavItemSpan = styled.span`
@ -471,8 +470,8 @@ const TabNavLine = styled.span<{ top: number }>`
  transform: scaleX(1);
  top: ${props => props.top}px;

-  background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
-  box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
+  background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240));
+  box-shadow: 0 0 8px 0 rgba(115, 103, 240);
  display: block;
  position: absolute;
  transition: all 0.2s ease;
@ -531,10 +530,8 @@ type AdminProps = {
  onDeleteUser: (userID: string, newOwnerID: string | null) => void;
  onInviteUser: ($target: React.RefObject<HTMLElement>) => void;
  users: Array<User>;
-  invitedUsers: Array<InvitedUserAccount>;
  canInviteUser: boolean;
  onUpdateUserPassword: (user: TaskUser, password: string) => void;
-  onDeleteInvitedUser: (invitedUserID: string) => void;
 };

 const Admin: React.FC<AdminProps> = ({
@ -543,9 +540,7 @@ const Admin: React.FC<AdminProps> = ({
  onUpdateUserPassword,
  canInviteUser,
  onDeleteUser,
-  onDeleteInvitedUser,
  onInviteUser,
-  invitedUsers,
  users,
 }) => {
  const warning =
@ -562,7 +557,6 @@ const Admin: React.FC<AdminProps> = ({
        <TabNavContent>
          {items.map((item, idx) => (
            <NavItem
-              key={item.name}
              onClick={(tab, top) => {
                if ($tabNav && $tabNav.current) {
                  const pos = $tabNav.current.getBoundingClientRect();
@ -582,7 +576,7 @@ const Admin: React.FC<AdminProps> = ({
        <TabContent>
          <MemberListWrapper>
            <MemberListHeader>
-              <ListTitle>{`Members (${users.length + invitedUsers.length})`}</ListTitle>
+              <ListTitle>{`Members (${users.length})`}</ListTitle>
              <ListDesc>
                Organization admins can create / manage / delete all projects & teams. Members only have access to teams
                or projects they have been added to.
@ -640,65 +634,6 @@ const Admin: React.FC<AdminProps> = ({
                  </MemberListItem>
                );
              })}
-              {invitedUsers.map(member => {
-                return (
-                  <MemberListItem>
-                    <MemberProfile
-                      showRoleIcons
-                      size={32}
-                      onMemberProfile={NOOP}
-                      member={{
-                        id: member.id,
-                        fullName: member.email,
-                        profileIcon: {
-                          bgColor: '#fff',
-                          url: null,
-                          initials: member.email.charAt(0),
-                        },
-                      }}
-                    />
-                    <MemberListItemDetails>
-                      <MemberItemName>{member.email}</MemberItemName>
-                      <MemberItemUsername>Invited</MemberItemUsername>
-                    </MemberListItemDetails>
-                    <MemberItemOptions>
-                      <MemberItemOption
-                        variant="outline"
-                        onClick={$target => {
-                          showPopup(
-                            $target,
-                            <TeamRoleManagerPopup
-                              user={{
-                                id: member.id,
-                                fullName: member.email,
-                                profileIcon: {
-                                  bgColor: '#fff',
-                                  url: null,
-                                  initials: member.email.charAt(0),
-                                },
-                                member: {
-                                  teams: [],
-                                  projects: [],
-                                },
-                                owned: {
-                                  teams: [],
-                                  projects: [],
-                                },
-                              }}
-                              users={users}
-                              onDeleteUser={() => {
-                                onDeleteInvitedUser(member.id);
-                              }}
-                            />,
-                          );
-                        }}
-                      >
-                        Manage
-                      </MemberItemOption>
-                    </MemberItemOptions>
-                  </MemberListItem>
-                );
-              })}
            </MemberList>
          </MemberListWrapper>
        </TabContent>
--- a/frontend/src/shared/components/Button/index.tsx
+++ b/frontend/src/shared/components/Button/index.tsx
@ -1,6 +1,5 @@
 import React, { useRef } from 'react';
 import styled, { css } from 'styled-components/macro';
-import { mixin } from '../../utils/styles';

 const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon?: boolean }>`
  position: relative;
@ -9,7 +8,7 @@ const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon
  justify-content: ${props => props.justifyTextContent};
  transition: all 0.2s ease;
  font-size: ${props => props.fontSize};
-  color: ${props => props.theme.colors.text.secondary};
+  color: rgba(${props => props.theme.colors.text.secondary});
  ${props =>
    props.hasIcon &&
    css`
@ -36,37 +35,32 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
    `}
 `;

-const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
-  background: ${props => props.theme.colors[props.color]};
-  ${props =>
-    props.hoverVariant === 'boxShadow' &&
-    css`
+const Filled = styled(Base)`
+  background: rgba(${props => props.theme.colors[props.color]});
  &:hover {
-        box-shadow: 0 8px 25px -8px ${props.theme.colors[props.color]};
+    box-shadow: 0 8px 25px -8px rgba(${props => props.theme.colors[props.color]});
  }
-    `}
 `;
-
 const Outline = styled(Base)<{ invert: boolean }>`
-  border: 1px solid ${props => props.theme.colors[props.color]};
+  border: 1px solid rgba(${props => props.theme.colors[props.color]});
  background: transparent;
  ${props =>
    props.invert
      ? css`
-          background: ${props.theme.colors[props.color]});
+          background: rgba(${props.theme.colors[props.color]});
          & ${Text} {
-            color: ${props.theme.colors.text.secondary});
+            color: rgba(${props.theme.colors.text.secondary});
          }
          &:hover {
-            background: ${mixin.rgba(props.theme.colors[props.color], 0.8)};
+            background: rgba(${props.theme.colors[props.color]}, 0.8);
          }
        `
      : css`
          & ${Text} {
-            color: ${props.theme.colors[props.color]});
+            color: rgba(${props.theme.colors[props.color]});
          }
          &:hover {
-            background: ${mixin.rgba(props.theme.colors[props.color], 0.08)};
+            background: rgba(${props.theme.colors[props.color]}, 0.08);
          }
        `}
 `;
@ -74,7 +68,7 @@ const Outline = styled(Base)<{ invert: boolean }>`
 const Flat = styled(Base)`
  background: transparent;
  &:hover {
-    background: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
+    background: rgba(${props => props.theme.colors[props.color]}, 0.2);
  }
 `;

@ -87,7 +81,7 @@ const LineX = styled.span<{ color: string }>`
  bottom: -2px;
  left: 50%;
  transform: translate(-50%);
-  background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
+  background: rgba(${props => props.theme.colors[props.color]}, 1);
 `;

 const LineDown = styled(Base)`
@ -96,7 +90,7 @@ const LineDown = styled(Base)`
  border-width: 0;
  border-style: solid;
  border-bottom-width: 2px;
-  border-color: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
+  border-color: rgba(${props => props.theme.colors[props.color]}, 0.2);

  &:hover ${LineX} {
    width: 100%;
@ -109,8 +103,8 @@ const LineDown = styled(Base)`
 const Gradient = styled(Base)`
  background: linear-gradient(
    30deg,
-    ${props => mixin.rgba(props.theme.colors[props.color], 1)},
-    ${props => mixin.rgba(props.theme.colors[props.color], 0.5)}
+    rgba(${props => props.theme.colors[props.color]}, 1),
+    rgba(${props => props.theme.colors[props.color]}, 0.5)
  );
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
  &:hover {
@ -119,7 +113,7 @@ const Gradient = styled(Base)`
 `;

 const Relief = styled(Base)`
-  background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
+  background: rgba(${props => props.theme.colors[props.color]}, 1);
  -webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset;
  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);

@ -129,11 +123,9 @@ const Relief = styled(Base)`
  }
 `;

-type HoverVariant = 'boxShadow' | 'none';
 type ButtonProps = {
  fontSize?: string;
  variant?: 'filled' | 'outline' | 'flat' | 'lineDown' | 'gradient' | 'relief';
-  hoverVariant?: HoverVariant;
  color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
  disabled?: boolean;
  type?: 'button' | 'submit';
@ -150,7 +142,6 @@ const Button: React.FC<ButtonProps> = ({
  invert = false,
  color = 'primary',
  variant = 'filled',
-  hoverVariant = 'boxShadow',
  type = 'button',
  justifyTextContent = 'center',
  icon,
@ -167,15 +158,7 @@ const Button: React.FC<ButtonProps> = ({
  switch (variant) {
    case 'filled':
      return (
-        <Filled
-          ref={$button}
-          hoverVariant={hoverVariant}
-          type={type}
-          onClick={handleClick}
-          className={className}
-          disabled={disabled}
-          color={color}
-        >
+        <Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
          {icon && icon}
          <Text hasIcon={typeof icon !== 'undefined'} justifyTextContent={justifyTextContent} fontSize={fontSize}>
            {children}
--- a/frontend/src/shared/components/Card/Styles.ts
+++ b/frontend/src/shared/components/Card/Styles.ts
@ -1,12 +1,14 @@
 import styled, { css, keyframes } from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';
 import TextareaAutosize from 'react-autosize-textarea';
-import { CheckCircle, CheckSquareOutline, Clock } from 'shared/icons';
+import { CheckCircle, CheckSquareOutline } from 'shared/icons';
+import { RefObject } from 'react';
 import TaskAssignee from 'shared/components/TaskAssignee';

 export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
-  box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.secondary},
-    inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
+  box-shadow: 0 0 0 2px rgba(${props => props.theme.colors.bg.secondary}),
+    inset 0 0 0 1px rgba(${props => props.theme.colors.bg.secondary}, 0.07);
  z-index: ${props => props.zIndex};
  position: relative;
 `;
@ -14,13 +16,11 @@ export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'no
  ${props =>
    props.color === 'success' &&
    css`
-      fill: ${props.theme.colors.success};
-      stroke: ${props.theme.colors.success};
+      fill: rgba(${props.theme.colors.success});
+      stroke: rgba(${props.theme.colors.success});
    `}
 `;
-export const ClockIcon = styled(Clock)<{ color: string }>`
-  fill: ${props => props.color};
-`;
+export const ClockIcon = styled(FontAwesomeIcon)``;

 export const EditorTextarea = styled(TextareaAutosize)`
  overflow: hidden;
@ -38,7 +38,7 @@ export const EditorTextarea = styled(TextareaAutosize)`
  padding: 0;
  font-size: 14px;
  line-height: 18px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
  &:focus {
    border: none;
    outline: none;
@ -89,7 +89,7 @@ export const ListCardBadgeText = styled.span<{ color?: 'success' | 'normal' }>`
  padding: 0 4px 0 6px;
  vertical-align: top;
  white-space: nowrap;
-  ${props => props.color === 'success' && `color: ${props.theme.colors.success};`}
+  ${props => props.color === 'success' && `color: rgba(${props.theme.colors.success});`}
 `;

 export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`
@ -101,9 +101,7 @@ export const ListCardContainer = styled.div<{ isActive: boolean; editable: boole
  position: relative;

  background-color: ${props =>
-    props.isActive && !props.editable
-      ? mixin.darken(props.theme.colors.bg.secondary, 0.1)
-      : `${props.theme.colors.bg.secondary}`};
+    props.isActive && !props.editable ? mixin.darken('#262c49', 0.1) : `rgba(${props.theme.colors.bg.secondary})`};
 `;

 export const ListCardInnerContainer = styled.div`
@ -149,11 +147,6 @@ export const ListCardLabelText = styled.span`
  line-height: 16px;
 `;

-export const ListCardLabelsWrapper = styled.div`
-  overflow: auto;
-  position: relative;
-`;
-
 export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
  ${props =>
    props.variant === 'small'
@ -185,6 +178,8 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
 `;

 export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>`
+  overflow: auto;
+  position: relative;
  &:hover {
    opacity: 0.8;
  }
@ -223,7 +218,7 @@ export const ListCardOperation = styled.span`
  top: 2px;
  z-index: 100;
  &:hover {
-    background-color: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.25)};
+    background-color: ${props => mixin.darken('#262c49', 0.25)};
  }
 `;

@ -235,7 +230,7 @@ export const CardTitle = styled.span`
  word-wrap: break-word;
  line-height: 18px;
  font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});

  display: flex;
  align-items: center;
@ -248,7 +243,7 @@ export const CardMembers = styled.div`
 `;

 export const CompleteIcon = styled(CheckCircle)`
-  fill: ${props => props.theme.colors.success};
+  fill: rgba(${props => props.theme.colors.success});
  margin-right: 4px;
  flex-shrink: 0;
 `;
--- a/frontend/src/shared/components/Card/index.tsx
+++ b/frontend/src/shared/components/Card/index.tsx
@ -1,5 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Pencil, Eye, List } from 'shared/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
+import { faClock, faEye } from '@fortawesome/free-regular-svg-icons';
 import {
  EditorTextarea,
  CardMember,
@ -18,7 +20,6 @@ import {
  ListCardLabels,
  ListCardLabel,
  ListCardLabelText,
-  ListCardLabelsWrapper,
  ListCardOperation,
  CardTitle,
  CardMembers,
@ -153,12 +154,10 @@ const Card = React.forwardRef(
                }
              }}
            >
-              <Pencil width={8} height={8} />
+              <FontAwesomeIcon onClick={onOperationClick} color="#c2c6dc" size="xs" icon={faPencilAlt} />
            </ListCardOperation>
          )}
          <ListCardDetails complete={complete ?? false}>
-            {labels && labels.length !== 0 && (
-              <ListCardLabelsWrapper>
            <ListCardLabels
              toggleLabels={toggleLabels}
              toggleDirection={toggleDirection}
@ -169,7 +168,8 @@ const Card = React.forwardRef(
                }
              }}
            >
-                  {labels
+              {labels &&
+                labels
                  .slice()
                  .sort((a, b) => a.labelColor.position - b.labelColor.position)
                  .map(label => (
@ -187,8 +187,6 @@ const Card = React.forwardRef(
                    </ListCardLabel>
                  ))}
            </ListCardLabels>
-              </ListCardLabelsWrapper>
-            )}
            {editable ? (
              <EditorContent>
                {complete && <CompleteIcon width={16} height={16} />}
@ -216,18 +214,18 @@ const Card = React.forwardRef(
            <ListCardBadges>
              {watched && (
                <ListCardBadge>
-                  <Eye width={8} height={8} />
+                  <FontAwesomeIcon color="#6b778c" icon={faEye} size="xs" />
                </ListCardBadge>
              )}
              {dueDate && (
                <DueDateCardBadge isPastDue={dueDate.isPastDue}>
-                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} width={8} height={8} />
+                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} icon={faClock} size="xs" />
                  <ListCardBadgeText>{dueDate.formattedDate}</ListCardBadgeText>
                </DueDateCardBadge>
              )}
              {description && (
                <DescriptionBadge>
-                  <List width={8} height={8} />
+                  <FontAwesomeIcon color="#6b778c" icon={faList} size="xs" />
                </DescriptionBadge>
              )}
              {checklists && (
--- a/frontend/src/shared/components/CardComposer/Styles.ts
+++ b/frontend/src/shared/components/CardComposer/Styles.ts
@ -1,15 +1,15 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import TextareaAutosize from 'react-autosize-textarea';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';

-export const CancelIconWrapper = styled.div`
+export const CancelIcon = styled(FontAwesomeIcon)`
  opacity: 0.8;
  cursor: pointer;
  font-size: 1.25em;
  padding-left: 5px;
 `;
-
 export const CardComposerWrapper = styled.div<{ isOpen: boolean }>`
  padding-bottom: 8px;
  display: ${props => (props.isOpen ? 'flex' : 'none')};
--- a/frontend/src/shared/components/CardComposer/index.tsx
+++ b/frontend/src/shared/components/CardComposer/index.tsx
@ -1,12 +1,12 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-import { Cross } from 'shared/icons';

 import {
  CardComposerWrapper,
-  CancelIconWrapper,
+  CancelIcon,
  AddCardButton,
  ComposerControls,
  ComposerControlsSaveSection,
@ -26,9 +26,10 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
  useOnOutsideClick($cardRef, true, onClose, null);
  useOnEscapeKeyDown(isOpen, onClose);
  return (
-    <CardComposerWrapper isOpen={isOpen} ref={$cardRef}>
+    <CardComposerWrapper isOpen={isOpen}>
      <Card
        title={cardName}
+        ref={$cardRef}
        taskID=""
        taskGroupID=""
        editable
@ -51,9 +52,7 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
          >
            Add Card
          </AddCardButton>
-          <CancelIconWrapper onClick={() => onClose()}>
-            <Cross width={12} height={12} />
-          </CancelIconWrapper>
+          <CancelIcon onClick={onClose} icon={faTimes} color="#42526e" />
        </ComposerControlsSaveSection>
        <ComposerControlsActionsSection />
      </ComposerControls>
--- a/frontend/src/shared/components/Checklist/Checklist.stories.tsx
+++ b/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 ${props => props.theme.colors.bg.primary};
+  border: 1px solid rgba(${props => props.theme.colors.bg.primary});
 `;

 const defaultItems = [
--- a/frontend/src/shared/components/Checklist/index.tsx
+++ b/frontend/src/shared/components/Checklist/index.tsx
@ -12,7 +12,6 @@ import Button from 'shared/components/Button';
 import TextareaAutosize from 'react-autosize-textarea';
 import Control from 'react-select/src/components/Control';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-import { mixin } from 'shared/utils/styles';

 const Wrapper = styled.div`
  margin-bottom: 24px;
@ -39,7 +38,7 @@ const WindowChecklistTitle = styled.div`

 const WindowTitleText = styled.h3`
  cursor: pointer;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
  margin: 6px 0;
  display: inline-block;
  width: auto;
@ -74,7 +73,7 @@ const ChecklistProgressPercent = styled.span`
 `;

 const ChecklistProgressBar = styled.div`
-  background: ${props => props.theme.colors.bg.primary};
+  background: rgba(${props => props.theme.colors.bg.primary});
  border-radius: 4px;
  clear: both;
  height: 8px;
@ -84,7 +83,7 @@ const ChecklistProgressBar = styled.div`
 `;
 const ChecklistProgressBarCurrent = styled.div<{ width: number }>`
  width: ${props => props.width}%;
-  background: ${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)};
+  background: rgba(${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)});
  bottom: 0;
  left: 0;
  position: absolute;
@ -112,7 +111,7 @@ const ChecklistIcon = styled.div`
 `;

 const ChecklistItemCheckedIcon = styled(CheckSquare)`
-  fill: ${props => props.theme.colors.primary};
+  fill: rgba(${props => props.theme.colors.primary});
 `;

 const ChecklistItemDetails = styled.div`
@ -134,7 +133,7 @@ const ChecklistItemTextControls = styled.div`
 `;

 const ChecklistItemText = styled.span<{ complete: boolean }>`
-  color: ${props => (props.complete ? '#5e6c84' : `${props.theme.colors.text.primary}`)};
+  color: ${props => (props.complete ? '#5e6c84' : `rgba(${props.theme.colors.text.primary})`)};
  ${props => props.complete && 'text-decoration: line-through;'}
  line-height: 20px;
  font-size: 16px;
@ -156,14 +155,14 @@ const ControlButton = styled.div`
  margin-left: 4px;
  padding: 4px 6px;
  border-radius: 6px;
-  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.8)};
+  background-color: rgba(${props => props.theme.colors.bg.primary}, 0.8);
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  &:hover {
-    background-color: ${props => mixin.rgba(props.theme.colors.primary, 1)};
+    background-color: rgba(${props => props.theme.colors.primary}, 1);
  }
 `;

@ -190,27 +189,27 @@ export const ChecklistNameEditor = styled(TextareaAutosize)`
  padding: 8px 12px;
  font-size: 16px;
  line-height: 20px;
-  border: 1px solid ${props => props.theme.colors.primary};
+  border: 1px solid rgba(${props => props.theme.colors.primary});
  border-radius: 3px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});

-  border-color: ${props => props.theme.colors.border};
-  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+  border-color: rgba(${props => props.theme.colors.border});
+  background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
  &:focus {
-    border-color: ${props => props.theme.colors.primary};
+    border-color: rgba(${props => props.theme.colors.primary});
  }
 `;

 const AssignUserButton = styled(AccountPlus)`
-  fill: ${props => props.theme.colors.text.primary};
+  fill: rgba(${props => props.theme.colors.text.primary});
 `;

 const ClockButton = styled(Clock)`
-  fill: ${props => props.theme.colors.text.primary};
+  fill: rgba(${props => props.theme.colors.text.primary});
 `;

 const TrashButton = styled(Trash)`
-  fill: ${props => props.theme.colors.text.primary};
+  fill: rgba(${props => props.theme.colors.text.primary});
 `;

 const ChecklistItemWrapper = styled.div<{ ref: any }>`
@ -225,7 +224,7 @@ const ChecklistItemWrapper = styled.div<{ ref: any }>`
  }

  &:hover {
-    background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+    background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
  }
  &:hover ${ControlButton} {
    opacity: 1;
@ -247,10 +246,10 @@ const CancelButton = styled.div`
  cursor: pointer;
  margin: 5px;
  & svg {
-    fill: ${props => props.theme.colors.text.primary};
+    fill: rgba(${props => props.theme.colors.text.primary});
  }
  &:hover svg {
-    fill: ${props => props.theme.colors.text.secondary};
+    fill: rgba(${props => props.theme.colors.text.secondary});
  }
 `;

@ -266,7 +265,7 @@ const EditableDeleteButton = styled.button`
  border-radius: 3px;

  &:hover {
-    background: ${props => mixin.rgba(props.theme.colors.primary, 0.8)};
+    background: rgba(${props => props.theme.colors.primary}, 0.8);
  }
 `;

--- a/frontend/src/shared/components/Chip/index.tsx
+++ b/frontend/src/shared/components/Chip/index.tsx
@ -7,7 +7,7 @@ const LabelText = styled.span`
  display: flex;
  align-items: center;
  justify-content: center;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;

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

--- a/frontend/src/shared/components/Confirm/Styles.ts
+++ b/frontend/src/shared/components/Confirm/Styles.ts
@ -1,103 +0,0 @@
-import styled from 'styled-components';
-import Button from 'shared/components/Button';
-
-export const Wrapper = styled.div`
-  background: #eff2f7;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-`;
-
-export const Column = styled.div`
-  width: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const LoginFormWrapper = styled.div`
-  background: #10163a;
-  width: 100%;
-`;
-
-export const LoginFormContainer = styled.div`
-  min-height: 505px;
-  padding: 2rem;
-`;
-
-export const Title = styled.h1`
-  color: #ebeefd;
-  font-size: 18px;
-  margin-bottom: 14px;
-`;
-
-export const SubTitle = styled.h2`
-  color: #c2c6dc;
-  font-size: 14px;
-  margin-bottom: 14px;
-`;
-export const Form = styled.form`
-  display: flex;
-  flex-direction: column;
-`;
-
-export const FormLabel = styled.label`
-  color: #c2c6dc;
-  font-size: 12px;
-  position: relative;
-  margin-top: 14px;
-`;
-
-export const FormTextInput = styled.input`
-  width: 100%;
-  background: #262c49;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  margin-top: 4px;
-  padding: 0.7rem 1rem 0.7rem 3rem;
-  font-size: 1rem;
-  color: #c2c6dc;
-  border-radius: 5px;
-`;
-
-export const FormIcon = styled.div`
-  top: 30px;
-  left: 16px;
-  position: absolute;
-`;
-
-export const FormError = styled.span`
-  font-size: 0.875rem;
-  color: rgb(234, 84, 85);
-`;
-
-export const LoginButton = styled(Button)``;
-
-export const ActionButtons = styled.div`
-  margin-top: 17.5px;
-  display: flex;
-  justify-content: space-between;
-`;
-
-export const RegisterButton = styled(Button)``;
-
-export const LogoTitle = styled.div`
-  font-size: 24px;
-  font-weight: 600;
-  margin-left: 12px;
-  transition: visibility, opacity, transform 0.25s ease;
-  color: #7367f0;
-`;
-
-export const LogoWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  position: relative;
-  width: 100%;
-  padding-bottom: 16px;
-  margin-bottom: 24px;
-  color: rgb(222, 235, 255);
-  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
-`;
--- a/frontend/src/shared/components/Confirm/index.tsx
+++ b/frontend/src/shared/components/Confirm/index.tsx
@ -1,62 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import AccessAccount from 'shared/undraw/AccessAccount';
-import { User, Lock, Taskcafe } from 'shared/icons';
-import { useForm } from 'react-hook-form';
-import LoadingSpinner from 'shared/components/LoadingSpinner';
-import {
-  Form,
-  LogoWrapper,
-  LogoTitle,
-  ActionButtons,
-  RegisterButton,
-  FormError,
-  FormIcon,
-  FormLabel,
-  FormTextInput,
-  Wrapper,
-  Column,
-  LoginFormWrapper,
-  LoginFormContainer,
-  Title,
-  SubTitle,
-} from './Styles';
-
-const Confirm = ({ onConfirmUser, hasConfirmToken }: ConfirmProps) => {
-  const [hasFailed, setFailed] = useState(false);
-  const setHasFailed = () => {
-    setFailed(true);
-  };
-  useEffect(() => {
-    onConfirmUser(setHasFailed);
-  });
-  return (
-    <Wrapper>
-      <Column>
-        <AccessAccount width={275} height={250} />
-      </Column>
-      <Column>
-        <LoginFormWrapper>
-          <LoginFormContainer>
-            <LogoWrapper>
-              <Taskcafe width={42} height={42} />
-              <LogoTitle>Taskcafé</LogoTitle>
-            </LogoWrapper>
-            {hasConfirmToken ? (
-              <>
-                <Title>Confirming user...</Title>
-                {hasFailed ? <SubTitle>There was an error while confirming your user</SubTitle> : <LoadingSpinner />}
-              </>
-            ) : (
-              <>
-                <Title>There is no confirmation token</Title>
-                <SubTitle>There seems to have been an error.</SubTitle>
-              </>
-            )}
-          </LoginFormContainer>
-        </LoginFormWrapper>
-      </Column>
-    </Wrapper>
-  );
-};
-
-export default Confirm;
--- a/frontend/src/shared/components/ControlledInput/Input.stories.tsx
+++ b/frontend/src/shared/components/ControlledInput/Input.stories.tsx
@ -19,7 +19,7 @@ export default {
 };

 const Wrapper = styled.div`
-  background: ${props => props.theme.colors.bg.primary};
+  background: rgba(${props => props.theme.colors.bg.primary});
  padding: 45px;
  margin: 25px;
  display: flex;
--- a/frontend/src/shared/components/ControlledInput/index.tsx
+++ b/frontend/src/shared/components/ControlledInput/index.tsx
@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components/macro';
-import theme from '../../../App/ThemeStyles';

 const InputWrapper = styled.div<{ width: string }>`
  position: relative;
@ -58,14 +57,14 @@ const InputInput = styled.input<{
    background: ${props => props.focusBg};
  }
  &:focus ~ ${InputLabel} {
-    color: ${props => props.theme.colors.primary};
+    color: rgba(115, 103, 240);
    transform: translate(-3px, -90%);
  }
  ${props =>
    props.hasValue &&
    css`
      & ~ ${InputLabel} {
-        color: ${props.theme.colors.primary};
+        color: rgba(115, 103, 240);
        transform: translate(-3px, -90%);
      }
    `}
@ -116,8 +115,8 @@ const ControlledInput = ({
 }: ControlledInputProps) => {
  const $input = useRef<HTMLInputElement>(null);
  const [hasValue, setHasValue] = useState(false);
-  const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : theme.colors.alternate;
-  const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
+  const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
+  const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
  useEffect(() => {
    if (autoFocus && $input && $input.current) {
      $input.current.focus();
--- a/frontend/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx
+++ b/frontend/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx
@ -2,7 +2,6 @@ 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,
@ -11,7 +10,7 @@ export default {
    backgrounds: [
      { name: 'white', value: '#ffffff' },
      { name: 'gray', value: '#f8f8f8' },
-      { name: 'darkBlue', value: theme.colors.bg.secondary, default: true },
+      { name: 'darkBlue', value: '#262c49', default: true },
    ],
  },
 };
--- a/frontend/src/shared/components/DropdownMenu/Styles.ts
+++ b/frontend/src/shared/components/DropdownMenu/Styles.ts
@ -59,7 +59,7 @@ export const ActionItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
  }
 `;

--- a/frontend/src/shared/components/DueDateManager/Styles.ts
+++ b/frontend/src/shared/components/DueDateManager/Styles.ts
@ -19,23 +19,23 @@ display: flex
  }

  & .react-datepicker-time__header {
-    color: ${props => props.theme.colors.text.primary};
+    color: rgba(${props => props.theme.colors.text.primary});
  }
  & .react-datepicker__time-list-item {
-    color: ${props => props.theme.colors.text.primary};
+    color: rgba(${props => props.theme.colors.text.primary});
  }
  & .react-datepicker__time-container .react-datepicker__time
  .react-datepicker__time-box ul.react-datepicker__time-list
  li.react-datepicker__time-list-item:hover {
-    color: ${props => props.theme.colors.text.secondary};
-    background: ${props => props.theme.colors.bg.secondary};
+    color: rgba(${props => props.theme.colors.text.secondary});
+    background: rgba(${props => props.theme.colors.bg.secondary});
  }
  & .react-datepicker__time-container .react-datepicker__time {
-    background: ${props => props.theme.colors.bg.primary};
+    background: rgba(${props => props.theme.colors.bg.primary});
  }
  & .react-datepicker--time-only {
-    background: ${props => props.theme.colors.bg.primary};
-    border: 1px solid ${props => props.theme.colors.border};
+    background: rgba(${props => props.theme.colors.bg.primary});
+    border: 1px solid rgba(${props => props.theme.colors.border});
  }

  & .react-datepicker * {
@ -75,12 +75,12 @@ display: flex
  }
  & .react-datepicker__day--selected {
    border-radius: 50%;
-    background: ${props => props.theme.colors.primary};
+    background: rgba(115, 103, 240);
    color: #fff;
  }
  & .react-datepicker__day--selected:hover {
    border-radius: 50%;
-    background: ${props => props.theme.colors.primary};
+    background: rgba(115, 103, 240);
    color: #fff;
  }
  & .react-datepicker__header {
@ -88,7 +88,7 @@ display: flex
    border: none;
  }
  & .react-datepicker__header--time {
-    border-bottom: 1px solid ${props => props.theme.colors.border};
+    border-bottom: 1px solid rgba(${props => props.theme.colors.border});
  }

 `;
--- a/frontend/src/shared/components/DueDateManager/index.tsx
+++ b/frontend/src/shared/components/DueDateManager/index.tsx
@ -1,5 +1,5 @@
 import React, { useState, useEffect, forwardRef } from 'react';
-import dayjs from 'dayjs';
+import moment from 'moment';
 import styled from 'styled-components';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
@ -43,7 +43,7 @@ const HeaderSelectLabel = styled.div`
  color: #c2c6dc;

  &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgba(115, 103, 240);
    color: #c2c6dc;
  }
 `;
@ -60,8 +60,8 @@ const HeaderSelect = styled.select`
  appearance: none;

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

 const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
-  const now = dayjs();
+  const now = moment();
  const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
  const [startDate, setStartDate] = useState(new Date());

  useEffect(() => {
-    const newDate = dayjs(startDate).format('YYYY-MM-DD');
+    const newDate = moment(startDate).format('YYYY-MM-DD');
    setValue('endDate', newDate);
  }, [startDate]);

@ -135,7 +135,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
    'December',
  ];
  const saveDueDate = (data: any) => {
-    const newDate = dayjs(`${data.endDate} ${dayjs(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
+    const newDate = moment(`${data.endDate} ${moment(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
    if (newDate.isValid()) {
      onDueDateChange(task, newDate.toDate());
    }
--- a/frontend/src/shared/components/EmptyBoard/index.tsx
+++ b/frontend/src/shared/components/EmptyBoard/index.tsx
@ -1,7 +1,6 @@
 import React from 'react';
 import styled, { keyframes } from 'styled-components/macro';
 import { mixin } from 'shared/utils/styles';
-import theme from '../../../App/ThemeStyles';

 export const BoardContainer = styled.div`
  position: relative;
@ -35,9 +34,9 @@ export const Container = styled.div`
  white-space: nowrap;
 `;

-export const defaultBaseColor = theme.colors.bg.primary;
+export const defaultBaseColor = '#10163a';

-export const defaultHighlightColor = mixin.lighten(theme.colors.bg.primary, 0.25);
+export const defaultHighlightColor = mixin.lighten('#10163a', 0.25);

 export const skeletonKeyframes = keyframes`
  0% {
--- a/frontend/src/shared/components/Input/Input.stories.tsx
+++ b/frontend/src/shared/components/Input/Input.stories.tsx
@ -19,7 +19,7 @@ export default {
 };

 const Wrapper = styled.div`
-  background: ${props => props.theme.colors.bg.primary};
+  background: rgba(${props => props.theme.colors.bg.primary});
  padding: 45px;
  margin: 25px;
  display: flex;
--- a/frontend/src/shared/components/Input/index.tsx
+++ b/frontend/src/shared/components/Input/index.tsx
@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components/macro';
-import theme from '../../../App/ThemeStyles';

 const InputWrapper = styled.div<{ width: string }>`
  position: relative;
@ -54,18 +53,18 @@ const InputInput = styled.input<{
  transition: all 0.3s ease;
  &:focus {
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
-    border: 1px solid ${props => props.theme.colors.primary};
+    border: 1px solid rgba(115, 103, 240);
    background: ${props => props.focusBg};
  }
  &:focus ~ ${InputLabel} {
-    color: ${props => props.theme.colors.primary};
+    color: rgba(115, 103, 240);
    transform: translate(-3px, -90%);
  }
  ${props =>
    props.hasValue &&
    css`
      & ~ ${InputLabel} {
-        color: ${props.theme.colors.primary};
+        color: rgba(115, 103, 240);
        transform: translate(-3px, -90%);
      }
    `}
@ -79,7 +78,6 @@ const Icon = styled.div`

 type InputProps = {
  variant?: 'normal' | 'alternate';
-  disabled?: boolean;
  label?: string;
  width?: string;
  floatingLabel?: boolean;
@ -118,7 +116,6 @@ function useCombinedRefs(...refs: any) {
 const Input = React.forwardRef(
  (
    {
-      disabled = false,
      width = 'auto',
      variant = 'normal',
      type = 'text',
@ -139,8 +136,8 @@ const Input = React.forwardRef(
    $ref: any,
  ) => {
    const [hasValue, setHasValue] = useState(defaultValue !== '');
-    const borderColor = variant === 'normal' ? 'rgba(0,0,0,0.2)' : theme.colors.alternate;
-    const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
+    const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
+    const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';

    // Merge forwarded ref and internal ref in order to be able to access the ref in the useEffect
    // The forwarded ref is not accessible by itself, which is what the innerRef & combined ref is for
@ -163,7 +160,6 @@ const Input = React.forwardRef(
          onChange={e => {
            setHasValue((e.currentTarget.value !== '' || floatingLabel) ?? false);
          }}
-          disabled={disabled}
          hasValue={hasValue}
          ref={combinedRef}
          id={id}
--- a/frontend/src/shared/components/List/Styles.ts
+++ b/frontend/src/shared/components/List/Styles.ts
@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import TextareaAutosize from 'react-autosize-textarea';
+import { mixin } from 'shared/utils/styles';

 export const Container = styled.div`
  width: 272px;
@ -33,7 +34,7 @@ export const AddCardButton = styled.a`
  &:hover {
    color: #c2c6dc;
    text-decoration: none;
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
  }
 `;
 export const Wrapper = styled.div`
@ -72,6 +73,7 @@ export const HeaderName = styled(TextareaAutosize)`
  box-shadow: none;
  font-weight: 600;
  margin: -4px 0;
+  padding: 4px 8px;

  letter-spacing: normal;
  word-spacing: normal;
@ -95,7 +97,7 @@ export const Header = styled.div<{ isEditing: boolean }>`
    props.isEditing &&
    css`
      & ${HeaderName} {
-        box-shadow: ${props.theme.colors.primary} 0px 0px 0px 1px;
+        box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
      }
    `}
 `;
--- a/frontend/src/shared/components/ListActions/Styles.ts
+++ b/frontend/src/shared/components/ListActions/Styles.ts
@ -21,7 +21,7 @@ export const ListActionItem = styled.span`
  margin: 0 -12px;
  text-decoration: none;
  &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
  }
 `;

--- a/frontend/src/shared/components/Lists/Lists.stories.tsx
+++ b/frontend/src/shared/components/Lists/Lists.stories.tsx
@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import theme from 'App/ThemeStyles';
 import Lists from '.';

 export default {
@ -8,7 +7,7 @@ export default {
  title: 'Lists',
  parameters: {
    backgrounds: [
-      { name: 'gray', value: theme.colors.bg.secondary, default: true },
+      { name: 'gray', value: '#262c49', default: true },
      { name: 'white', value: '#ffffff' },
    ],
  },
--- a/frontend/src/shared/components/Lists/index.tsx
+++ b/frontend/src/shared/components/Lists/index.tsx
@ -10,7 +10,7 @@ import {
  getNewDraggablePosition,
  getAfterDropDraggableList,
 } from 'shared/utils/draggables';
-import dayjs from 'dayjs';
+import moment from 'moment';
 import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';

 import { Container, BoardContainer, BoardWrapper } from './Styles';
@ -51,7 +51,7 @@ export type TaskStatusFilter = {

 export interface TaskMetaFilterName {
  meta: TaskMeta;
-  value?: string | dayjs.Dayjs | null;
+  value?: string | moment.Moment | null;
  id?: string | null;
 }

@ -104,30 +104,30 @@ function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
    return true;
  }
  if (filter.status === TaskStatus.COMPLETE && task.completedAt && task.complete === true) {
-    const completedAt = dayjs(task.completedAt);
-    const REFERENCE = dayjs();
+    const completedAt = moment(task.completedAt);
+    const REFERENCE = moment(); // fixed just for testing, use moment();
    switch (filter.since) {
      case TaskSince.TODAY:
        const TODAY = REFERENCE.clone().startOf('day');
        return completedAt.isSame(TODAY, 'd');
      case TaskSince.YESTERDAY:
        const YESTERDAY = REFERENCE.clone()
-          .subtract(1, 'day')
+          .subtract(1, 'days')
          .startOf('day');
        return completedAt.isSameOrAfter(YESTERDAY, 'd');
      case TaskSince.ONE_WEEK:
        const ONE_WEEK = REFERENCE.clone()
-          .subtract(7, 'day')
+          .subtract(7, 'days')
          .startOf('day');
        return completedAt.isSameOrAfter(ONE_WEEK, 'd');
      case TaskSince.TWO_WEEKS:
        const TWO_WEEKS = REFERENCE.clone()
-          .subtract(14, 'day')
+          .subtract(14, 'days')
          .startOf('day');
        return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
      case TaskSince.THREE_WEEKS:
        const THREE_WEEKS = REFERENCE.clone()
-          .subtract(21, 'day')
+          .subtract(21, 'days')
          .startOf('day');
        return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
      default:
@ -353,7 +353,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                                  task.dueDate
                                                    ? {
                                                        isPastDue: false,
-                                                        formattedDate: dayjs(task.dueDate).format('MMM D, YYYY'),
+                                                        formattedDate: moment(task.dueDate).format('MMM D, YYYY'),
                                                      }
                                                    : undefined
                                                }
--- a/frontend/src/shared/components/Lists/metaFilter.ts
+++ b/frontend/src/shared/components/Lists/metaFilter.ts
@ -1,5 +1,5 @@
 import { TaskMetaFilters, DueDateFilterType } from 'shared/components/Lists';
-import dayjs from 'dayjs';
+import moment from 'moment';

 enum ShouldFilter {
  NO_FILTER,
@ -24,8 +24,8 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
      isFiltered = shouldFilter(!(task.dueDate && task.dueDate !== null));
    }
    if (task.dueDate) {
-      const taskDueDate = dayjs(task.dueDate);
-      const today = dayjs();
+      const taskDueDate = moment(task.dueDate);
+      const today = moment();
      let start;
      let end;
      switch (filters.dueDate.type) {
@ -40,7 +40,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
            taskDueDate.isBefore(
              today
                .clone()
-                .add(1, 'day')
+                .add(1, 'days')
                .endOf('day'),
            ),
          );
@ -60,12 +60,12 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
          start = today
            .clone()
            .weekday(0)
-            .add(7, 'day')
+            .add(7, 'days')
            .startOf('day');
          end = today
            .clone()
            .weekday(6)
-            .add(7, 'day')
+            .add(7, 'days')
            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
@ -73,7 +73,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
          start = today.clone().startOf('day');
          end = today
            .clone()
-            .add(7, 'day')
+            .add(7, 'days')
            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
@ -81,7 +81,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
          start = today.clone().startOf('day');
          end = today
            .clone()
-            .add(14, 'day')
+            .add(14, 'days')
            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
@ -89,7 +89,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
          start = today.clone().startOf('day');
          end = today
            .clone()
-            .add(21, 'day')
+            .add(21, 'days')
            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
--- a/frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx
+++ b/frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx
@ -1,24 +0,0 @@
-import React from 'react';
-import NormalizeStyles from 'App/NormalizeStyles';
-import BaseStyles from 'App/BaseStyles';
-import LoadingSpinner from '.';
-
-export default {
-  component: LoadingSpinner,
-  title: 'Login',
-  parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff' },
-      { name: 'gray', value: '#cdd3e1', default: true },
-    ],
-  },
-};
-export const Default = () => {
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      <LoadingSpinner />
-    </>
-  );
-};
--- a/frontend/src/shared/components/LoadingSpinner/Styles.ts
+++ b/frontend/src/shared/components/LoadingSpinner/Styles.ts
@ -1,42 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-
-const LoadingSpinnerKeyframes = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-
-export const LoadingSpinnerWrapper = styled.div<{ color: string; size: string; borderSize: string; thickness: string }>`
-  display: inline-block;
-  position: relative;
-  width: ${props => props.borderSize};
-  height: ${props => props.borderSize};
-
-  & > div {
-    box-sizing: border-box;
-    display: block;
-    position: absolute;
-    width: ${props => props.size};
-    height: ${props => props.size};
-    margin: ${props => props.thickness};
-    border: ${props => props.thickness} solid ${props => props.theme.colors[props.color]};
-    border-radius: 50%;
-    animation: 1.2s ${LoadingSpinnerKeyframes} cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    border-color: ${props => props.theme.colors[props.color]} transparent transparent transparent;
-  }
-
-  & > div:nth-child(1) {
-    animation-delay: -0.45s;
-  }
-  & > div:nth-child(2) {
-    animation-delay: -0.3s;
-  }
-  & > div:nth-child(3) {
-    animation-delay: -0.15s;
-  }
-`;
-
-export default LoadingSpinnerWrapper;
--- a/frontend/src/shared/components/LoadingSpinner/index.tsx
+++ b/frontend/src/shared/components/LoadingSpinner/index.tsx
@ -1,41 +0,0 @@
-import React from 'react';
-
-import { LoadingSpinnerWrapper } from './Styles';
-
-type LoadingSpinnerProps = {
-  color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
-  size?: string;
-  borderSize?: string;
-  thickness?: string;
-};
-
-/**
- * The default parameters may not be applicable to every scenario
- *
- * While borderSize and size should be a single prop,
- * it is currently not as such because it would require math to be done to strings
- * e.g "80px - 16"
- *
- *
- * @param color
- * @param size The size of the spinner. It is recommended to be at least 16 px less than the borderSize
- * @param thickness
- * @param borderSize Border size affects the size of the border which if is too small may break the spinner.
- * @constructor
- */
-const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
-  color = 'primary',
-  size = '64px',
-  thickness = '8px',
-  borderSize = '80px',
-}) => {
-  return (
-    <LoadingSpinnerWrapper color={color} size={size} thickness={thickness} borderSize={borderSize}>
-      <div />
-      <div />
-      <div />
-    </LoadingSpinnerWrapper>
-  );
-};
-
-export default LoadingSpinner;
--- a/frontend/src/shared/components/Login/Styles.ts
+++ b/frontend/src/shared/components/Login/Styles.ts
@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
-import { mixin } from 'shared/utils/styles';

 export const Wrapper = styled.div`
  background: #eff2f7;
@ -69,7 +68,7 @@ export const FormIcon = styled.div`

 export const FormError = styled.span`
  font-size: 0.875rem;
-  color: ${props => props.theme.colors.danger};
+  color: rgb(234, 84, 85);
 `;

 export const LoginButton = styled(Button)``;
@ -100,5 +99,5 @@ export const LogoWrapper = styled.div`
  padding-bottom: 16px;
  margin-bottom: 24px;
  color: rgb(222, 235, 255);
-  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
+  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
 `;
--- a/frontend/src/shared/components/Login/index.tsx
+++ b/frontend/src/shared/components/Login/index.tsx
@ -3,7 +3,6 @@ import AccessAccount from 'shared/undraw/AccessAccount';
 import { User, Lock, Taskcafe } from 'shared/icons';
 import { useForm } from 'react-hook-form';

-import LoadingSpinner from 'shared/components/LoadingSpinner';
 import {
  Form,
  LogoWrapper,
@ -74,7 +73,6 @@ const Login = ({ onSubmit }: LoginProps) => {

              <ActionButtons>
                <RegisterButton variant="outline">Register</RegisterButton>
-                {!isComplete && <LoadingSpinner size="32px" thickness="2px" borderSize="48px" />}
                <LoginButton type="submit" disabled={!isComplete}>
                  Login
                </LoginButton>
--- a/frontend/src/shared/components/MemberManager/Styles.ts
+++ b/frontend/src/shared/components/MemberManager/Styles.ts
@ -20,14 +20,14 @@ export const MemberManagerSearch = styled(TextareaAutosize)`
  font-size: 14px;
  font-weight: 400;

-  background: ${props => props.theme.colors.bg.secondary};
+  background: #262c49;
  outline: none;
-  color: ${props => props.theme.colors.text.primary};
-  border-color: ${props => props.theme.colors.border};
+  color: #c2c6dc;
+  border-color: #414561;

  &:focus {
-    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
-    background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
+    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
+    background: ${mixin.darken('#262c49', 0.15)};
  }
 `;

@ -66,8 +66,8 @@ export const BoardMemberListItemContent = styled(Member)`
  color: #c2c6dc;

  &:hover {
-    background-color: ${props => props.theme.colors.primary};
-    color: ${props => props.theme.colors.text.secondary};
+    background-color: rgba(${props => props.theme.colors.primary});
+    color: rgba(${props => props.theme.colors.text.secondary});
  }
 `;

@ -80,7 +80,7 @@ export const ProfileIcon = styled.div`
  justify-content: center;
  color: #c2c6dc;
  font-weight: 700;
-  background: ${props => props.theme.colors.primary};
+  background: rgb(115, 103, 240);
  cursor: pointer;
  margin-right: 6px;
 `;
--- a/frontend/src/shared/components/MiniProfile/Styles.ts
+++ b/frontend/src/shared/components/MiniProfile/Styles.ts
@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 import Button from 'shared/components/Button';
 import { Checkmark } from 'shared/icons';
-import { mixin } from 'shared/utils/styles';

 export const RoleCheckmark = styled(Checkmark)`
  padding-left: 4px;
@ -81,36 +80,36 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
      ? css`
          user-select: none;
          pointer-events: none;
-          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
+          color: rgba(${props.theme.colors.text.primary}, 0.4);
        `
      : css`
          cursor: pointer;
          &:hover {
-            background: ${props.theme.colors.primary};
+            background: rgb(115, 103, 240);
          }
        `}
 `;

 export const CurrentPermission = styled.span`
  margin-left: 4px;
-  color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
 `;

 export const Separator = styled.div`
  height: 1px;
-  border-top: 1px solid ${props => props.theme.colors.alternate};
+  border-top: 1px solid #414561;
  margin: 0.25rem !important;
 `;

 export const WarningText = styled.span`
  display: flex;
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
  padding: 6px;
 `;

 export const DeleteDescription = styled.div`
  font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;

 export const RemoveMemberButton = styled(Button)`
--- a/frontend/src/shared/components/MiniProfile/index.tsx
+++ b/frontend/src/shared/components/MiniProfile/index.tsx
@ -47,7 +47,6 @@ const permissions = [
 type MiniProfileProps = {
  bio: string;
  user: TaskUser;
-  invited?: boolean;
  onRemoveFromTask?: () => void;
  onChangeRole?: (roleCode: RoleCode) => void;
  onRemoveFromBoard?: () => void;
@ -57,7 +56,6 @@ type MiniProfileProps = {
 const MiniProfile: React.FC<MiniProfileProps> = ({
  user,
  bio,
-  invited,
  canChangeRole,
  onRemoveFromTask,
  onChangeRole,
@ -76,7 +74,7 @@ const MiniProfile: React.FC<MiniProfileProps> = ({
          )}
          <ProfileInfo>
            <InfoTitle>{user.fullName}</InfoTitle>
-            {invited ? <InfoUsername>Invited</InfoUsername> : <InfoUsername>{`@${user.username}`}</InfoUsername>}
+            <InfoUsername>{`@${user.username}`}</InfoUsername>
            <InfoBio>{bio}</InfoBio>
          </ProfileInfo>
        </Profile>
--- a/frontend/src/shared/components/Modal/index.tsx
+++ b/frontend/src/shared/components/Modal/index.tsx
@ -30,9 +30,9 @@ const CloseIcon = styled(Cross)`
  top: 16px;
  right: -32px;
  cursor: pointer;
-  fill: ${props => props.theme.colors.text.primary};
+  fill: rgba(${props => props.theme.colors.text.primary});
  &:hover {
-    fill: ${props => props.theme.colors.text.secondary};
+    fill: rgba(${props => props.theme.colors.text.secondary});
  }
 `;

--- a/frontend/src/shared/components/Navbar/Styles.ts
+++ b/frontend/src/shared/components/Navbar/Styles.ts
@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { mixin } from 'shared/utils/styles';

 export const Logo = styled.div``;

@ -10,7 +9,7 @@ export const LogoTitle = styled.div`
  font-size: 24px;
  font-weight: 600;
  transition: visibility, opacity, transform 0.25s ease;
-  color: #22ff00;
+  color: #7367f0;
 `;
 export const ActionContainer = styled.div`
  position: relative;
@ -47,8 +46,8 @@ export const ActionButtonWrapper = styled.div<{ active?: boolean }>`
  ${props =>
    props.active &&
    css`
-      background: ${props.theme.colors.primary};
-      box-shadow: 0 0 10px 1px ${mixin.rgba(props.theme.colors.primary, 0.7)};
+      background: rgb(115, 103, 240);
+      box-shadow: 0 0 10px 1px rgba(115, 103, 240, 0.7);
    `}
  border-radius: 6px;
  cursor: pointer;
@ -74,7 +73,7 @@ export const LogoWrapper = styled.div`
  color: rgb(222, 235, 255);
  cursor: pointer;
  transition: color 0.1s ease 0s, border 0.1s ease 0s;
-  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
+  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
 `;

 export const Container = styled.aside`
@ -88,12 +87,12 @@ export const Container = styled.aside`
  transform: translateZ(0px);
  background: #10163a;
  transition: all 0.1s ease 0s;
-  border-right: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
+  border-right: 1px solid rgba(65, 69, 97, 0.65);

  &:hover {
    width: 260px;
    box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 50px 0px;
-    border-right: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0)};
+    border-right: 1px solid rgba(65, 69, 97, 0);
  }
  &:hover ${LogoTitle} {
    bottom: -12px;
@ -107,6 +106,6 @@ export const Container = styled.aside`
  }

  &:hover ${LogoWrapper} {
-    border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0)};
+    border-bottom: 1px solid rgba(65, 69, 97, 0);
  }
 `;
--- a/frontend/src/shared/components/NewProject/index.tsx
+++ b/frontend/src/shared/components/NewProject/index.tsx
@ -3,17 +3,16 @@ import styled from 'styled-components';
 import { mixin } from 'shared/utils/styles';
 import Select from 'react-select';
 import { ArrowLeft, Cross } from 'shared/icons';
-import theme from '../../../App/ThemeStyles';

 function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
  if (isDisabled) {
    return null;
  }
  if (isSelected) {
-    return mixin.darken(theme.colors.bg.secondary, 0.25);
+    return mixin.darken('#262c49', 0.25);
  }
  if (isFocused) {
-    return mixin.darken(theme.colors.bg.secondary, 0.15);
+    return mixin.darken('#262c49', 0.15);
  }
  return null;
 }
@ -98,8 +97,8 @@ const ProjectName = styled.input`
  font-weight: 400;

  &:focus {
-    background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
-    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
+    background: ${mixin.darken('#262c49', 0.15)};
+    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
  }
 `;
 const ProjectNameLabel = styled.label`
@ -127,35 +126,35 @@ const colourStyles = {
  control: (styles: any, data: any) => {
    return {
      ...styles,
-      backgroundColor: data.isMenuOpen ? mixin.darken(theme.colors.bg.secondary, 0.15) : theme.colors.bg.secondary,
-      boxShadow: data.menuIsOpen ? `${theme.colors.primary} 0px 0px 0px 1px` : 'none',
+      backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49',
+      boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none',
      borderRadius: '3px',
      borderWidth: '1px',
      borderStyle: 'solid',
      borderImage: 'initial',
-      borderColor: theme.colors.alternate,
+      borderColor: '#414561',
      ':hover': {
-        boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
+        boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
        borderRadius: '3px',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderImage: 'initial',
-        borderColor: theme.colors.alternate,
+        borderColor: '#414561',
      },
      ':active': {
-        boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
+        boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
        borderRadius: '3px',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderImage: 'initial',
-        borderColor: `${theme.colors.primary}`,
+        borderColor: 'rgb(115, 103, 240)',
      },
    };
  },
  menu: (styles: any) => {
    return {
      ...styles,
-      backgroundColor: mixin.darken(theme.colors.bg.secondary, 0.15),
+      backgroundColor: mixin.darken('#262c49', 0.15),
    };
  },
  dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
@ -168,11 +167,11 @@ const colourStyles = {
      cursor: isDisabled ? 'not-allowed' : 'default',
      ':active': {
        ...styles[':active'],
-        backgroundColor: !isDisabled && (isSelected ? mixin.darken(theme.colors.bg.secondary, 0.25) : '#fff'),
+        backgroundColor: !isDisabled && (isSelected ? mixin.darken('#262c49', 0.25) : '#fff'),
      },
      ':hover': {
        ...styles[':hover'],
-        backgroundColor: !isDisabled && (isSelected ? theme.colors.primary : theme.colors.primary),
+        backgroundColor: !isDisabled && (isSelected ? 'rgb(115, 103, 240)' : 'rgb(115, 103, 240)'),
      },
    };
  },
@ -210,21 +209,21 @@ const CreateButton = styled.button`

  &:hover {
    color: #fff;
-    background: ${props => props.theme.colors.primary};
-    border-color: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
+    border-color: rgb(115, 103, 240);
  }
 `;
 type NewProjectProps = {
  initialTeamID: string | null;
  teams: Array<Team>;
  onClose: () => void;
-  onCreateProject: (projectName: string, teamID: string | null) => void;
+  onCreateProject: (projectName: string, teamID: string) => void;
 };

 const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose, onCreateProject }) => {
  const [projectName, setProjectName] = useState('');
  const [team, setTeam] = useState<null | string>(initialTeamID);
-  const options = [{ label: 'No team', value: 'no-team' }, ...teams.map(t => ({ label: t.name, value: t.id }))];
+  const options = teams.map(t => ({ label: t.name, value: t.id }));
  return (
    <Overlay>
      <Content>
@ -263,7 +262,7 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
                  onChange={(e: any) => {
                    setTeam(e.value);
                  }}
-                  value={options.find(d => d.value === team)}
+                  value={options.filter(d => d.value === team)}
                  styles={colourStyles}
                  classNamePrefix="teamSelect"
                  options={options}
@ -272,8 +271,8 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
            </ProjectInfo>
            <CreateButton
              onClick={() => {
-                if (projectName !== '') {
-                  onCreateProject(projectName, team === 'no-team' ? null : team);
+                if (team && projectName !== '') {
+                  onCreateProject(projectName, team);
                }
              }}
            >
--- a/frontend/src/shared/components/NotifcationPopup/index.tsx
+++ b/frontend/src/shared/components/NotifcationPopup/index.tsx
@ -37,7 +37,7 @@ const ItemTextContainer = styled.div`
 const ItemTextTitle = styled.span`
  font-weight: 500;
  display: block;
-  color: ${props => props.theme.colors.primary};
+  color: rgba(${props => props.theme.colors.primary});
  font-size: 14px;
 `;
 const ItemTextDesc = styled.span`
@ -76,21 +76,21 @@ const NotificationHeader = styled.div`
  text-align: center;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
-  background: ${props => props.theme.colors.primary};
+  background: rgba(${props => props.theme.colors.primary});
 `;

 const NotificationHeaderTitle = styled.span`
  font-size: 14px;
-  color: ${props => props.theme.colors.text.secondary};
+  color: rgba(${props => props.theme.colors.text.secondary});
 `;

 const NotificationFooter = styled.div`
  cursor: pointer;
  padding: 0.5rem;
  text-align: center;
-  color: ${props => props.theme.colors.primary};
+  color: rgba(${props => props.theme.colors.primary});
  &:hover {
-    background: ${props => props.theme.colors.bg.primary};
+    background: #10163a;
  }
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
--- a/frontend/src/shared/components/PopupMenu/LabelEditor.tsx
+++ b/frontend/src/shared/components/PopupMenu/LabelEditor.tsx
@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { SaveButton, DeleteButton, LabelBox, EditLabelForm, FieldLabel, FieldName } from './Styles';

 const WhiteCheckmark = styled(Checkmark)`
-  fill: ${props => props.theme.colors.text.secondary};
+  fill: rgba(${props => props.theme.colors.text.secondary});
 `;
 type Props = {
  labelColors: Array<LabelColor>;
--- a/frontend/src/shared/components/PopupMenu/Styles.ts
+++ b/frontend/src/shared/components/PopupMenu/Styles.ts
@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 import { mixin } from 'shared/utils/styles';
 import ControlledInput from 'shared/components/ControlledInput';
-import theme from 'App/ThemeStyles';

 export const Container = styled.div<{
  invertY: boolean;
@ -177,7 +176,7 @@ export const LabelIcon = styled.div`
  cursor: pointer;

  &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
  }
 `;

@ -234,8 +233,8 @@ export const FieldName = styled.input`
  font-weight: 400;

  &:focus {
-    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
-    background: ${mixin.darken(theme.colors.bg.secondary, 0.15)};
+    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
+    background: ${mixin.darken('#262c49', 0.15)};
  }
 `;

@ -259,7 +258,7 @@ export const LabelBox = styled.span<{ color: string }>`
 `;

 export const SaveButton = styled.input`
-  background: ${props => props.theme.colors.primary};
+  background: rgb(115, 103, 240);
  box-shadow: none;
  border: none;
  color: #fff;
@ -297,7 +296,7 @@ export const DeleteButton = styled.input`

  &:hover {
    color: #fff;
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
    border-color: transparent;
  }
 `;
@ -318,7 +317,7 @@ export const CreateLabelButton = styled.button`
  cursor: pointer;

  &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
  }
 `;

--- a/frontend/src/shared/components/PopupMenu/index.tsx
+++ b/frontend/src/shared/components/PopupMenu/index.tsx
@ -4,7 +4,6 @@ import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import { createPortal } from 'react-dom';
 import NOOP from 'shared/utils/noop';
 import produce from 'immer';
-import theme from 'App/ThemeStyles';
 import {
  Container,
  ContainerDiamond,
@ -19,7 +18,7 @@ import {
 function getPopupOptions(options?: PopupOptions) {
  const popupOptions = {
    borders: true,
-    diamondColor: theme.colors.bg.secondary,
+    diamondColor: '#262c49',
    targetPadding: '10px',
    showDiamond: true,
    width: 316,
--- a/frontend/src/shared/components/ProjectSettings/index.tsx
+++ b/frontend/src/shared/components/ProjectSettings/index.tsx
@ -24,7 +24,7 @@ export const ListActionItem = styled.span`
  margin: 0 -12px;
  text-decoration: none;
  &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
  }
 `;

--- a/frontend/src/shared/components/QuickCardEditor/Styles.ts
+++ b/frontend/src/shared/components/QuickCardEditor/Styles.ts
@ -1,4 +1,6 @@
 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);
@ -28,7 +30,7 @@ export const Container = styled.div<{ fixed: boolean; width: number; top: number

 export const SaveButton = styled.button`
  cursor: pointer;
-  background: ${props => props.theme.colors.primary};
+  background: rgb(115, 103, 240);
  box-shadow: none;
  border: none;
  color: #fff;
--- a/frontend/src/shared/components/Register/Styles.ts
+++ b/frontend/src/shared/components/Register/Styles.ts
@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
-import { mixin } from 'shared/utils/styles';

 export const Wrapper = styled.div`
  background: #eff2f7;
@ -69,7 +68,7 @@ export const FormIcon = styled.div`

 export const FormError = styled.span`
  font-size: 0.875rem;
-  color: ${props => props.theme.colors.danger};
+  color: rgb(234, 84, 85);
 `;

 export const LoginButton = styled(Button)``;
@ -100,5 +99,5 @@ export const LogoWrapper = styled.div`
  padding-bottom: 16px;
  margin-bottom: 24px;
  color: rgb(222, 235, 255);
-  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
+  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
 `;
--- a/frontend/src/shared/components/Register/index.tsx
+++ b/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, registered = false }: RegisterProps) => {
+const Register = ({ onSubmit }: RegisterProps) => {
  const [isComplete, setComplete] = useState(true);
  const { register, handleSubmit, errors, setError } = useForm<RegisterFormData>();
  const loginSubmit = (data: RegisterFormData) => {
@ -43,15 +43,8 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
              <Taskcafe width={42} height={42} />
              <LogoTitle>Taskcafé</LogoTitle>
            </LogoWrapper>
-            {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>
+            <SubTitle>Please create the system admin user</SubTitle>
            <Form onSubmit={handleSubmit(loginSubmit)}>
              <FormLabel htmlFor="fullname">
                Full name
@ -147,8 +140,6 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                </RegisterButton>
              </ActionButtons>
            </Form>
-              </>
-            )}
          </LoginFormContainer>
        </LoginFormWrapper>
      </Column>
--- a/frontend/src/shared/components/Select/index.tsx
+++ b/frontend/src/shared/components/Select/index.tsx
@ -2,54 +2,53 @@ 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(theme.colors.bg.secondary, 0.25);
+    return mixin.darken('#262c49', 0.25);
  }
  if (isFocused) {
-    return mixin.darken(theme.colors.bg.secondary, 0.15);
+    return mixin.darken('#262c49', 0.15);
  }
  return null;
 }

-export const colourStyles = {
+const colourStyles = {
  control: (styles: any, data: any) => {
    return {
      ...styles,
-      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',
+      backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49',
+      boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none',
      borderRadius: '3px',
      borderWidth: '1px',
      borderStyle: 'solid',
      borderImage: 'initial',
-      borderColor: theme.colors.alternate,
+      borderColor: '#414561',
      ':hover': {
-        boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
+        boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
        borderRadius: '3px',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderImage: 'initial',
-        borderColor: theme.colors.alternate,
+        borderColor: '#414561',
      },
      ':active': {
-        boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
+        boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
        borderRadius: '3px',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderImage: 'initial',
-        borderColor: `${theme.colors.primary}`,
+        borderColor: 'rgb(115, 103, 240)',
      },
    };
  },
  menu: (styles: any) => {
    return {
      ...styles,
-      backgroundColor: mixin.darken(theme.colors.bg.secondary, 0.15),
+      backgroundColor: mixin.darken('#262c49', 0.15),
    };
  },
  dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
@ -62,11 +61,11 @@ export const colourStyles = {
      cursor: isDisabled ? 'not-allowed' : 'default',
      ':active': {
        ...styles[':active'],
-        backgroundColor: !isDisabled && (isSelected ? mixin.darken(theme.colors.bg.secondary, 0.25) : '#fff'),
+        backgroundColor: !isDisabled && (isSelected ? mixin.darken('#262c49', 0.25) : '#fff'),
      },
      ':hover': {
        ...styles[':hover'],
-        backgroundColor: !isDisabled && (isSelected ? theme.colors.primary : theme.colors.primary),
+        backgroundColor: !isDisabled && (isSelected ? 'rgb(115, 103, 240)' : 'rgb(115, 103, 240)'),
      },
    };
  },
@ -87,7 +86,7 @@ export const colourStyles = {
 const InputLabel = styled.span<{ width: string }>`
 width: ${props => props.width};
 padding-left: 0.7rem;
-color: ${props => props.theme.colors.primary};
+color: rgba(115, 103, 240);
 left: 0;
 top: 0;
 transition: all 0.2s ease;
--- a/frontend/src/shared/components/Settings/Settings.stories.tsx
+++ b/frontend/src/shared/components/Settings/Settings.stories.tsx
@ -27,7 +27,6 @@ export const Default = () => {
      <BaseStyles />
      <Settings
        profile={profile}
-        onChangeUserInfo={action('change user info')}
        onResetPassword={action('reset password')}
        onProfileAvatarRemove={action('remove')}
        onProfileAvatarChange={action('profile avatar change')}
--- a/frontend/src/shared/components/Settings/index.tsx
+++ b/frontend/src/shared/components/Settings/index.tsx
@ -10,14 +10,9 @@ const PasswordInput = styled(Input)`
  margin-bottom: 0;
 `;

-const UserInfoInput = styled(Input)`
-  margin-top: 30px;
-  margin-bottom: 0;
-`;
-
 const FormError = styled.span`
  font-size: 12px;
-  color: ${props => props.theme.colors.warning};
+  color: rgba(${props => props.theme.colors.warning});
 `;

 const ProfileContainer = styled.div`
@ -152,12 +147,12 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
  width: 100%;
  position: relative;

-  color: ${props => (props.active ? `${props.theme.colors.primary}` : '#c2c6dc')};
+  color: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')};
  &:hover {
-    color: ${props => props.theme.colors.primary};
+    color: rgba(115, 103, 240);
  }
  &:hover svg {
-    fill: ${props => props.theme.colors.primary};
+    fill: rgba(115, 103, 240);
  }
 `;

@ -175,8 +170,8 @@ const TabNavLine = styled.span<{ top: number }>`
  transform: scaleX(1);
  top: ${props => props.top}px;

-  background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
-  box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
+  background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240));
+  box-shadow: 0 0 8px 0 rgba(115, 103, 240);
  display: block;
  position: absolute;
  transition: all 0.2s ease;
@ -245,7 +240,6 @@ const SaveButton = styled(Button)`
 type SettingsProps = {
  onProfileAvatarChange: () => void;
  onProfileAvatarRemove: () => void;
-  onChangeUserInfo: (data: UserInfoData, done: () => void) => void;
  onResetPassword: (password: string, done: () => void) => void;
  profile: TaskUser;
 };
@ -306,93 +300,9 @@ const ResetPasswordTab: React.FC<ResetPasswordTabProps> = ({ onResetPassword })
  );
 };

-type UserInfoData = {
-  full_name: string;
-  bio: string;
-  initials: string;
-  email: string;
-};
-type UserInfoTabProps = {
-  profile: TaskUser;
-  onProfileAvatarChange: () => void;
-  onProfileAvatarRemove: () => void;
-  onChangeUserInfo: (data: UserInfoData, done: () => void) => void;
-};
-
-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 UserInfoTab: React.FC<UserInfoTabProps> = ({
-  profile,
-  onProfileAvatarRemove,
-  onProfileAvatarChange,
-  onChangeUserInfo,
-}) => {
-  const [active, setActive] = useState(true);
-  const { register, handleSubmit, errors } = useForm<UserInfoData>();
-  const done = () => {
-    setActive(true);
-  };
-  return (
-    <>
-      <AvatarSettings
-        onProfileAvatarRemove={onProfileAvatarRemove}
-        onProfileAvatarChange={onProfileAvatarChange}
-        profile={profile.profileIcon}
-      />
-      <form
-        onSubmit={handleSubmit(data => {
-          setActive(false);
-          onChangeUserInfo(data, done);
-        })}
-      >
-        <UserInfoInput
-          ref={register({ required: 'Full name is required' })}
-          name="full_name"
-          defaultValue={profile.fullName}
-          width="100%"
-          label="Name"
-        />
-        {errors.full_name && <FormError>{errors.full_name.message}</FormError>}
-        <UserInfoInput
-          defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.initials : ''}
-          ref={register({
-            required: 'Initials is required',
-            pattern: { value: INITIALS_PATTERN, message: 'Intials must be between two to four characters' },
-          })}
-          name="initials"
-          width="100%"
-          label="Initials "
-        />
-        {errors.initials && <FormError>{errors.initials.message}</FormError>}
-        <UserInfoInput disabled defaultValue={profile.username ?? ''} width="100%" label="Username " />
-        <UserInfoInput
-          width="100%"
-          name="email"
-          ref={register({
-            required: 'Email is required',
-            pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
-          })}
-          defaultValue={profile.email ?? ''}
-          label="Email"
-        />
-        {errors.email && <FormError>{errors.email.message}</FormError>}
-        <UserInfoInput width="100%" name="bio" ref={register()} defaultValue={profile.bio ?? ''} label="Bio" />
-        {errors.bio && <FormError>{errors.bio.message}</FormError>}
-        <SettingActions>
-          <SaveButton disabled={!active} type="submit">
-            Save Change
-          </SaveButton>
-        </SettingActions>
-      </form>
-    </>
-  );
-};
-
 const Settings: React.FC<SettingsProps> = ({
  onProfileAvatarRemove,
  onProfileAvatarChange,
-  onChangeUserInfo,
  onResetPassword,
  profile,
 }) => {
@ -405,7 +315,6 @@ const Settings: React.FC<SettingsProps> = ({
        <TabNavContent>
          {items.map((item, idx) => (
            <NavItem
-              key={item.name}
              onClick={(tab, top) => {
                if ($tabNav && $tabNav.current) {
                  const pos = $tabNav.current.getBoundingClientRect();
@ -423,12 +332,23 @@ const Settings: React.FC<SettingsProps> = ({
      </TabNav>
      <TabContentWrapper>
        <Tab tab={0} currentTab={currentTab}>
-          <UserInfoTab
-            onProfileAvatarChange={onProfileAvatarChange}
+          <AvatarSettings
            onProfileAvatarRemove={onProfileAvatarRemove}
-            profile={profile}
-            onChangeUserInfo={onChangeUserInfo}
+            onProfileAvatarChange={onProfileAvatarChange}
+            profile={profile.profileIcon}
          />
+          <Input defaultValue={profile.fullName} width="100%" label="Name" />
+          <Input
+            defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.initials : ''}
+            width="100%"
+            label="Initials "
+          />
+          <Input defaultValue={profile.username ?? ''} width="100%" label="Username " />
+          <Input width="100%" label="Email" />
+          <Input width="100%" label="Bio" />
+          <SettingActions>
+            <SaveButton>Save Change</SaveButton>
+          </SettingActions>
        </Tab>
        <Tab tab={1} currentTab={currentTab}>
          <ResetPasswordTab onResetPassword={onResetPassword} />
--- a/frontend/src/shared/components/TaskAssignee/index.tsx
+++ b/frontend/src/shared/components/TaskAssignee/index.tsx
@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { DoubleChevronUp, Crown } from 'shared/icons';

 export const AdminIcon = styled(DoubleChevronUp)`
@ -24,78 +24,46 @@ const TaskDetailAssignee = styled.div`
  position: relative;
 `;

-export const Wrapper = styled.div<{
-  size: number | string;
-  bgColor: string | null;
-  backgroundURL: string | null;
-  hasClick: boolean;
-}>`
+export const Wrapper = styled.div<{ size: number | string; bgColor: string | null; backgroundURL: string | null }>`
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
-  color: ${props => (props.backgroundURL ? props.theme.colors.text.primary : 'rgb(0,0,0)')};
+  color: rgba(${props => (props.backgroundURL ? props.theme.colors.text.primary : '0,0,0')});
  background: ${props => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
  background-position: center;
  background-size: contain;
  font-size: 14px;
  font-weight: 400;
-  ${props =>
-    props.hasClick &&
-    css`
  &:hover {
    opacity: 0.8;
  }
-    `}
 `;

 type TaskAssigneeProps = {
  size: number | string;
  showRoleIcons?: boolean;
  member: TaskUser;
-  invited?: boolean;
-  onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
+  onMemberProfile: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
  className?: string;
 };

-const TaskAssignee: React.FC<TaskAssigneeProps> = ({
-  showRoleIcons,
-  member,
-  invited,
-  onMemberProfile,
-  size,
-  className,
-}) => {
+const TaskAssignee: React.FC<TaskAssigneeProps> = ({ showRoleIcons, member, onMemberProfile, size, className }) => {
  const $memberRef = useRef<HTMLDivElement>(null);
-  let profileIcon: ProfileIcon = {
-    url: null,
-    bgColor: null,
-    initials: null,
-  };
-  if (member.profileIcon) {
-    profileIcon = member.profileIcon;
-  }
  return (
    <TaskDetailAssignee
      className={className}
      ref={$memberRef}
      onClick={e => {
        e.stopPropagation();
-        if (onMemberProfile) {
        onMemberProfile($memberRef, member.id);
-        }
      }}
      key={member.id}
    >
-      <Wrapper
-        hasClick={typeof onMemberProfile !== undefined}
-        backgroundURL={profileIcon.url ?? null}
-        bgColor={profileIcon.bgColor ?? null}
-        size={size}
-      >
-        {(!profileIcon.url && profileIcon.initials) ?? ''}
+      <Wrapper backgroundURL={member.profileIcon.url ?? null} bgColor={member.profileIcon.bgColor ?? null} size={size}>
+        {(!member.profileIcon.url && member.profileIcon.initials) ?? ''}
      </Wrapper>
      {showRoleIcons && member.role && member.role.code === 'admin' && <AdminIcon width={10} height={10} />}
      {showRoleIcons && member.role && member.role.code === 'owner' && <OwnerIcon width={10} height={10} />}
--- a/frontend/src/shared/components/TaskDetails/ActivityMessage.tsx
+++ b/frontend/src/shared/components/TaskDetails/ActivityMessage.tsx
@ -1,53 +0,0 @@
-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;
--- a/frontend/src/shared/components/TaskDetails/CommentCreator.tsx
+++ b/frontend/src/shared/components/TaskDetails/CommentCreator.tsx
@ -1,133 +0,0 @@
-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;
--- a/frontend/src/shared/components/TaskDetails/Styles.ts
+++ b/frontend/src/shared/components/TaskDetails/Styles.ts
@ -3,6 +3,8 @@ 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;
@ -31,35 +33,35 @@ export const MarkCompleteButton = styled.button<{ invert: boolean }>`
  ${props =>
    props.invert
      ? css`
-          background: ${props.theme.colors.success};
+          background: rgba(${props.theme.colors.success});
          & svg {
-            fill: ${props.theme.colors.text.secondary};
+            fill: rgba(${props.theme.colors.text.secondary});
          }
          & span {
-            color: ${props.theme.colors.text.secondary};
+            color: rgba(${props.theme.colors.text.secondary});
          }
          &:hover {
-            background: ${mixin.rgba(props.theme.colors.success, 0.8)};
+            background: rgba(${props.theme.colors.success}, 0.8);
          }
        `
      : css`
          background: none;
-          border: 1px solid ${props.theme.colors.text.secondary};
+          border: 1px solid rgba(${props.theme.colors.text.secondary});
          & svg {
-            fill: ${props.theme.colors.text.secondary};
+            fill: rgba(${props.theme.colors.text.secondary});
          }
          & span {
-            color: ${props.theme.colors.text.secondary};
+            color: rgba(${props.theme.colors.text.secondary});
          }
          &:hover {
-            background: ${mixin.rgba(props.theme.colors.success, 0.08)};
-            border: 1px solid ${props.theme.colors.success};
+            background: rgba(${props.theme.colors.success}, 0.08);
+            border: 1px solid rgba(${props.theme.colors.success});
          }
          &:hover svg {
-            fill: ${props.theme.colors.success};
+            fill: rgba(${props.theme.colors.success});
          }
          &:hover span {
-            color: ${props.theme.colors.success};
+            color: rgba(${props.theme.colors.success});
          }
        `}
 `;
@ -83,7 +85,7 @@ export const SidebarTitle = styled.div`
  font-size: 12px;
  min-height: 24px;
  margin-left: 8px;
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.75);
  padding-top: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
@ -91,7 +93,7 @@ export const SidebarTitle = styled.div`

 export const SidebarButton = styled.div`
  font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
  min-height: 32px;
  width: 100%;

@ -166,7 +168,7 @@ export const TaskDetailsTitle = styled(TextareaAutosize)`
  }

  &:focus {
-    border-color: ${props => props.theme.colors.primary};
+    border-color: rgba(${props => props.theme.colors.primary});
  }
 `;

@ -174,7 +176,7 @@ export const DueDateTitle = styled.div`
  font-size: 12px;
  min-height: 24px;
  margin-left: 8px;
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.75);
  padding-top: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
@ -185,7 +187,7 @@ export const AssignedUsersSection = styled.div`
  padding-right: 32px;
  padding-top: 24px;
  padding-bottom: 24px;
-  border-bottom: 1px solid ${props => props.theme.colors.alternate};
+  border-bottom: 1px solid #414561;
  display: flex;
  flex-direction: column;
 `;
@ -203,10 +205,10 @@ export const AssignUserIcon = styled.div`
  justify-content: center;
  align-items: center;
  &:hover {
-    border: 1px solid ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
+    border: 1px solid rgba(${props => props.theme.colors.text.secondary}, 0.75);
  }
  &:hover svg {
-    fill: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
+    fill: rgba(${props => props.theme.colors.text.secondary}, 0.75);
  }
 `;

@ -221,17 +223,17 @@ export const AssignUsersButton = styled.div`
  align-items: center;
  border: 1px solid transparent;
  &:hover {
-    border: 1px solid ${props => mixin.darken(props.theme.colors.alternate, 0.15)};
+    border: 1px solid ${mixin.darken('#414561', 0.15)};
  }
  &:hover ${AssignUserIcon} {
-    border: 1px solid ${props => props.theme.colors.alternate};
+    border: 1px solid #414561;
  }
 `;

 export const AssignUserLabel = styled.span`
  flex: 1 1 auto;
  line-height: 15px;
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.75);
 `;

 export const ExtraActionsSection = styled.div`
@ -243,7 +245,7 @@ export const ExtraActionsSection = styled.div`
 `;

 export const ActionButtonsTitle = styled.h3`
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
@ -253,7 +255,7 @@ export const ActionButton = styled(Button)`
  margin-top: 8px;
  margin-left: -10px;
  padding: 8px 16px;
-  background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.5)};
+  background: rgba(${props => props.theme.colors.bg.primary}, 0.5);
  text-align: left;
  transition: transform 0.2s ease;
  & span {
@ -262,7 +264,7 @@ export const ActionButton = styled(Button)`
  &:hover {
    box-shadow: none;
    transform: translateX(4px);
-    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.75)};
+    background: rgba(${props => props.theme.colors.bg.primary}, 0.75);
  }
 `;

@ -281,10 +283,10 @@ export const HeaderActionIcon = styled.div`

  cursor: pointer;
  svg {
-    fill: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
+    fill: rgba(${props => props.theme.colors.text.primary}, 0.75);
  }
  &:hover svg {
-    fill: ${props => mixin.rgba(props.theme.colors.primary, 0.75)});
+    fill: rgba(${props => props.theme.colors.primary});
  }
 `;

@ -341,7 +343,7 @@ export const MetaDetail = styled.div`
 `;

 export const MetaDetailTitle = styled.h3`
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
@ -360,7 +362,7 @@ export const MetaDetailContent = styled.div`
 `;
 export const TaskDetailsAddLabel = styled.div`
  border-radius: 3px;
-  background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
+  background: ${mixin.darken('#262c49', 0.15)};
  cursor: pointer;
  &:hover {
    opacity: 0.8;
@ -375,7 +377,7 @@ export const TaskDetailsAddLabelIcon = styled.div`
  align-items: center;
  justify-content: center;
  border-radius: 3px;
-  background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
+  background: ${mixin.darken('#262c49', 0.15)};
  cursor: pointer;
  &:hover {
    opacity: 0.8;
@ -450,11 +452,11 @@ export const TabBarSection = styled.div`
 `;

 export const TabBarItem = styled.div`
-  box-shadow: inset 0 -2px ${props => props.theme.colors.primary};
+  box-shadow: inset 0 -2px rgba(216, 93, 216);
  padding: 12px 7px 14px 7px;
  margin-bottom: -1px;
  margin-right: 36px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;

 export const CommentContainer = styled.div`
@ -475,7 +477,6 @@ export const CommentEditorContainer = styled.div`
  border: 1px solid #414561;
  display: flex;
  flex-direction: column;
-  background: #1f243e;
 `;
 export const CommentProfile = styled(TaskAssignee)`
  margin-right: 8px;
@ -485,27 +486,25 @@ export const CommentProfile = styled(TaskAssignee)`
  align-items: normal;
 `;

-export const CommentTextArea = styled(TextareaAutosize)<{ showCommentActions: boolean }>`
+export const CommentTextArea = styled(TextareaAutosize)`
  width: 100%;
  line-height: 28px;
  padding: 4px 6px;
  border-radius: 6px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${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;
-  ${props =>
-    props.showCommentActions
-      ? css`
+  &:not(:focus) {
+    height: 36px;
+  }
+  &:focus {
    min-height: 80px;
    max-height: none;
    line-height: 20px;
-        `
-      : css`
-          height: 36px;
-        `}
+  }
 `;

 export const CommentEditorActions = styled.div<{ visible: boolean }>`
@ -532,18 +531,6 @@ 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`
@ -552,37 +539,30 @@ 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<{ editable?: boolean }>`
+export const ActivityItemHeader = styled.div`
  display: flex;
-  flex-direction: column;
-  padding-left: 8px;
-  ${props => props.editable && 'width: 100%;'}
 `;
 export const ActivityItemHeaderUser = styled(TaskAssignee)`
-  align-items: start;
+  margin-right: 4px;
 `;

 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: ${props => mixin.rgba(props.theme.colors.text.primary, 0.65)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.65);
  margin-left: ${props => props.margin}px;
 `;

@ -590,73 +570,18 @@ export const ActivityItemDetails = styled.div`
  margin-left: 32px;
 `;

-export const ActivityItemCommentContainer = styled.div``;
-export const ActivityItemComment = styled.div<{ editable: boolean }>`
+export const ActivityItemComment = styled.div`
  display: inline-flex;
-  flex-direction: column;
  border-radius: 3px;
  ${mixin.boxShadowCard}
  position: relative;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
  padding: 8px 12px;
  margin: 4px 0;
-  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;
+  background-color: ${mixin.darken('#262c49', 0.1)};
 `;

 export const ActivityItemLog = styled.span`
  margin-left: 2px;
-  color: ${props => props.theme.colors.text.primary};
-`;
-
-export const ViewRawButton = styled.button`
-  border-radius: 3px;
-  padding: 8px 12px;
-  display: flex;
-  position: absolute;
-  right: 4px;
-  bottom: -24px;
-  cursor: pointer;
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.25)};
-  &:hover {
-    color: ${props => props.theme.colors.text.primary};
-  }
-`;
-
-export const TaskDetailsEditor = styled(TextareaAutosize)`
-  min-height: 108px;
-  color: #c2c6dc;
-  background: #262c49;
-  border-radius: 3px;
-  line-height: 20px;
-  margin-left: 32px;
-  margin-right: 32px;
-  padding: 9px 8px 7px 8px;
-  outline: none;
-  border: none;
+  color: rgba(${props => props.theme.colors.text.primary});
 `;
--- a/frontend/src/shared/components/TaskDetails/TaskDetails.stories.tsx
+++ b/frontend/src/shared/components/TaskDetails/TaskDetails.stories.tsx
@ -0,0 +1,86 @@
+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')}
+            />
+          );
+        }}
+      />
+    </>
+  );
+};
--- a/frontend/src/shared/components/TaskDetails/index.tsx
+++ b/frontend/src/shared/components/TaskDetails/index.tsx
@ -12,32 +12,17 @@ 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 moment from 'moment';
+
 import Task from 'shared/icons/Task';
 import {
-  ActivityItemHeader,
-  ActivityItemTimestamp,
-  ActivityItem,
-  ActivityItemCommentAction,
-  ActivityItemCommentActions,
  TaskDetailLabel,
  CommentContainer,
-  ActivityItemCommentContainer,
  MetaDetailContent,
  TaskDetailsAddLabelIcon,
  ActionButton,
@ -45,7 +30,6 @@ import {
  AssignUserLabel,
  AssignUsersButton,
  AssignedUsersSection,
-  ViewRawButton,
  DueDateTitle,
  Container,
  LeftSidebar,
@ -73,126 +57,17 @@ 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``;

@ -237,13 +112,8 @@ 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;
@ -252,15 +122,11 @@ type TaskDetailsProps = {

 const TaskDetails: React.FC<TaskDetailsProps> = ({
  me,
-  onCancelCommentEdit,
  task,
-  editableComment = null,
  onDeleteChecklist,
  onTaskNameChange,
-  onCommentShowActions,
  onOpenAddChecklistPopup,
  onChangeChecklistName,
-  onCreateComment,
  onChecklistDrop,
  onChecklistItemDrop,
  onToggleTaskComplete,
@ -269,7 +135,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
  onDeleteItem,
  onDeleteTask,
  onCloseModal,
-  onUpdateComment,
  onOpenAddMemberPopup,
  onOpenAddLabelPopup,
  onOpenDueDatePopop,
@ -288,39 +153,12 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
    return true;
  });
  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);
  };
@ -331,7 +169,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
          <LeftSidebarSection>
            <SidebarTitle>TASK GROUP</SidebarTitle>
            <SidebarButton>
-              <SidebarButtonText>{task.taskGroup.name}</SidebarButtonText>
+              <SidebarButtonText>Release 0.1.0</SidebarButtonText>
            </SidebarButton>
            <DueDateTitle>DUE DATE</DueDateTitle>
            <SidebarButton
@ -341,7 +179,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
              }}
            >
              {task.dueDate ? (
-                <SidebarButtonText>{dayjs(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
+                <SidebarButtonText>{moment(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
              ) : (
                <SidebarButtonText>No due date</SidebarButtonText>
              )}
@ -471,9 +309,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
        </HeaderContainer>
        <InnerContentContainer>
          <DescriptionContainer>
-            {showRaw ? (
-              <TaskDetailsEditor value={taskDescriptionRef.current} />
-            ) : (
            <EditorContainer
              onClick={e => {
                if (!editTaskDescription) {
@ -496,9 +331,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                }}
              />
            </EditorContainer>
-            )}
-
-            <ViewRawButton onClick={() => setShowRaw(!showRaw)}>{showRaw ? 'Show editor' : 'Show raw'}</ViewRawButton>
          </DescriptionContainer>
          <ChecklistSection>
            <DragDropContext onDragEnd={result => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>
@ -584,29 +416,46 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
          <TabBarSection>
            <TabBarItem>Activity</TabBarItem>
          </TabBarSection>
-          <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>
+          <ActivitySection />
        </InnerContentContainer>
        <CommentContainer>
          {me && (
-            <CommentCreator
-              me={me}
-              onCreateComment={message => onCreateComment(task, message)}
-              onMemberProfile={onMemberProfile}
+            <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>
          )}
        </CommentContainer>
      </ContentContainer>
--- a/frontend/src/shared/components/TaskDetails/remark.js
+++ b/frontend/src/shared/components/TaskDetails/remark.js
@ -1,61 +0,0 @@
-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 };
--- a/frontend/src/shared/components/Textarea/index.tsx
+++ b/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: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
+    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
  }
 `;

--- a/frontend/src/shared/components/TopNavbar/Styles.ts
+++ b/frontend/src/shared/components/TopNavbar/Styles.ts
@ -11,8 +11,7 @@ export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
  z-index: ${props => props.zIndex};
  position: relative;

-  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)};
+  box-shadow: 0 0 0 2px rgba(16, 22, 58), inset 0 0 0 1px rgba(16, 22, 58, 0.07);
 `;

 export const NavbarWrapper = styled.div`
@ -29,9 +28,9 @@ export const NavbarHeader = styled.header`
  display: flex;
  align-items: center;
  justify-content: space-between;
-  background: ${props => props.theme.colors.bg.primary};
+  background: rgb(16, 22, 58);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
-  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
+  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
 `;
 export const Breadcrumbs = styled.div`
  color: rgb(94, 108, 132);
@ -125,7 +124,7 @@ export const ProjectTabs = styled.div`

 export const ProjectTab = styled(NavLink)`
  font-size: 80%;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
  font-size: 15px;
  cursor: pointer;
  display: flex;
@ -142,22 +141,22 @@ export const ProjectTab = styled(NavLink)`
  }

  &:hover {
-    box-shadow: inset 0 -2px ${props => props.theme.colors.text.secondary};
-    color: ${props => props.theme.colors.text.secondary};
+    box-shadow: inset 0 -2px rgba(${props => props.theme.colors.text.secondary});
+    color: rgba(${props => props.theme.colors.text.secondary});
  }

  &.active {
-    box-shadow: inset 0 -2px ${props => props.theme.colors.secondary};
-    color: ${props => props.theme.colors.secondary};
+    box-shadow: inset 0 -2px rgba(${props => props.theme.colors.secondary});
+    color: rgba(${props => props.theme.colors.secondary});
  }
  &.active:hover {
-    box-shadow: inset 0 -2px ${props => props.theme.colors.secondary};
-    color: ${props => props.theme.colors.secondary};
+    box-shadow: inset 0 -2px rgba(${props => props.theme.colors.secondary});
+    color: rgba(${props => props.theme.colors.secondary});
  }
 `;

 export const ProjectName = styled.h1`
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
  font-weight: 600;
  font-size: 20px;
  padding: 3px 10px 3px 8px;
@ -186,7 +185,7 @@ export const ProjectNameTextarea = styled(TextareaAutosize)`
  font-size: 20px;
  padding: 3px 10px 3px 8px;
  &:focus {
-    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
+    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
  }
 `;

@ -204,7 +203,7 @@ export const ProjectSwitcher = styled.button`
  color: #c2c6dc;
  cursor: pointer;
  &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
  }
 `;

@ -228,7 +227,7 @@ export const ProjectSettingsButton = styled.button`
  justify-content: center;
  cursor: pointer;
  &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
  }
 `;

@ -244,7 +243,7 @@ export const ProjectFinder = styled(Button)`

 export const NavSeparator = styled.div`
  width: 1px;
-  background: ${props => props.theme.colors.border};
+  background: rgba(${props => props.theme.colors.border});
  height: 34px;
  margin: 0 20px;
 `;
@ -252,8 +251,8 @@ export const NavSeparator = styled.div`
 export const LogoContainer = styled(Link)`
  display: block;
  left: 50%;
-  right: 50%;
  position: absolute;
+  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
@ -261,11 +260,11 @@ export const LogoContainer = styled(Link)`

 export const TaskcafeTitle = styled.h2`
  margin-left: 5px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
  font-size: 20px;
 `;

 export const TaskcafeLogo = styled(Taskcafe)`
-  fill: ${props => props.theme.colors.text.primary};
-  stroke: ${props => props.theme.colors.text.primary};
+  fill: rgba(${props => props.theme.colors.text.primary});
+  stroke: rgba(${props => props.theme.colors.text.primary});
 `;
--- a/frontend/src/shared/components/TopNavbar/TopNavbar.stories.tsx
+++ b/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: theme.colors.bg.secondary, default: true },
+      { name: 'darkBlue', value: '#262c49', default: true },
    ],
  },
 };
--- a/frontend/src/shared/components/TopNavbar/index.tsx
+++ b/frontend/src/shared/components/TopNavbar/index.tsx
@ -1,11 +1,10 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { Home, Star, Bell, AngleDown, BarChart, CheckCircle, ListUnordered } from 'shared/icons';
+import { Home, Star, Bell, AngleDown, BarChart, CheckCircle } from 'shared/icons';
 import styled from 'styled-components';
 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,
@ -174,11 +173,8 @@ type NavBarProps = {
  user: TaskUser | null;
  onOpenSettings: ($target: React.RefObject<HTMLElement>) => void;
  projectMembers?: Array<TaskUser> | null;
-  projectInvitedMembers?: Array<InvitedUser> | null;
-
  onRemoveFromBoard?: (userID: string) => void;
  onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
-  onInvitedMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, email: string) => void;
 };

 const NavBar: React.FC<NavBarProps> = ({
@ -188,12 +184,10 @@ const NavBar: React.FC<NavBarProps> = ({
  onChangeProjectOwner,
  currentTab,
  onMemberProfile,
-  onInvitedMemberProfile,
  canEditProjectName = false,
  onOpenProjectFinder,
  onFavorite,
  onSetTab,
-  projectInvitedMembers,
  onChangeRole,
  name,
  onRemoveFromBoard,
@ -210,7 +204,6 @@ const NavBar: React.FC<NavBarProps> = ({
      onProfileClick($target);
    }
  };
-  const history = useHistory();
  const { showPopup } = usePopup();
  return (
    <NavbarWrapper>
@ -252,38 +245,19 @@ const NavBar: React.FC<NavBarProps> = ({
          <TaskcafeTitle>Taskcafé</TaskcafeTitle>
        </LogoContainer>
        <GlobalActions>
-          {projectMembers && projectInvitedMembers && onMemberProfile && onInvitedMemberProfile && (
+          {projectMembers && onMemberProfile && (
            <>
              <ProjectMembers>
                {projectMembers.map((member, idx) => (
                  <ProjectMember
                    showRoleIcons
-                    zIndex={projectMembers.length - idx + projectInvitedMembers.length}
+                    zIndex={projectMembers.length - idx}
                    key={member.id}
                    size={28}
                    member={member}
                    onMemberProfile={onMemberProfile}
                  />
                ))}
-                {projectInvitedMembers.map((member, idx) => (
-                  <ProjectMember
-                    showRoleIcons
-                    zIndex={projectInvitedMembers.length - idx}
-                    key={member.email}
-                    size={28}
-                    invited
-                    member={{
-                      id: member.email,
-                      fullName: member.email,
-                      profileIcon: {
-                        url: null,
-                        initials: member.email.charAt(0),
-                        bgColor: '#fff',
-                      },
-                    }}
-                    onMemberProfile={onInvitedMemberProfile}
-                  />
-                ))}
                {canInviteUser && (
                  <InviteButton
                    onClick={$target => {
@ -309,9 +283,6 @@ const NavBar: React.FC<NavBarProps> = ({
          <IconContainer disabled onClick={NOOP}>
            <CheckCircle width={20} height={20} />
          </IconContainer>
-          <IconContainer disabled onClick={NOOP}>
-            <ListUnordered width={20} height={20} />
-          </IconContainer>
          <IconContainer disabled onClick={onNotificationClick}>
            <Bell color="#c2c6dc" size={20} />
          </IconContainer>
--- a/frontend/src/shared/generated/graphql.tsx
+++ b/frontend/src/shared/generated/graphql.tsx
--- a/frontend/src/shared/graphql/createProject.graphqls
+++ b/frontend/src/shared/graphql/createProject.graphqls
@ -1,5 +1,5 @@
-mutation createProject($teamID: UUID, $name: String!) {
-  createProject(input: {teamID: $teamID, name: $name}) {
+mutation createProject($teamID: UUID!, $userID: UUID!, $name: String!) {
+  createProject(input: {teamID: $teamID, userID: $userID, name: $name}) {
    id
    name
    team {
--- a/frontend/src/shared/graphql/createTaskGroup.graphqls
+++ b/frontend/src/shared/graphql/createTaskGroup.graphqls
@ -1,4 +1,4 @@
-mutation createTaskGroup( $projectID: UUID!, $name: String!, $position: Float! ) {
+mutation createTaskGroup( $projectID: String!, $name: String!, $position: Float! ) {
  createTaskGroup(
    input: { projectID: $projectID, name: $name, position: $position }
  ) {
--- a/frontend/src/shared/graphql/deleteTask.graphqls
+++ b/frontend/src/shared/graphql/deleteTask.graphqls
@ -1,4 +1,4 @@
-mutation deleteTask($taskID: UUID!) {
+mutation deleteTask($taskID: String!) {
  deleteTask(input: { taskID: $taskID }) {
    taskID
  }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jordan Knott	0eb9c0db94	feat: implement task group actions - allow sorting specifc task groups - duplicate task group - delete all tasks in task group	2020-09-10 22:33:03 -05:00
Jordan Knott	cdcccbfb4a	chore: switch eslint to lint changed files intead of whole project	2020-09-10 22:13:16 -05:00