.tmuxinator.yml

@@ -10,8 +10,6 @@ windows:
         - yarn:
           - cd frontend
           - yarn start
-        - worker:
-          - go run cmd/taskcafe/main.go worker
   - web/editor:
       root: ./frontend
       panes:

CHANGELOG.md

@@ -4,15 +4,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## UNRELEASED
-
-### Added
-- On login page, redirects to `/register` if no users exist (to help streamline initial setup)
-
-### Fixed
-- Fixes new user popup form so that it can now be submitted
-
-## [0.3.5] - 2021-09-04
+## [0.4.0] - 2021-09-04
 
 ### Added
 - Project visibility can now be set to public - meaning anyone can view the project board

docker-compose.dev.yml

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

docker-compose.yml

@@ -12,9 +12,6 @@ services:
     environment:
       TASKCAFE_DATABASE_HOST: postgres
       TASKCAFE_MIGRATE: "true"
-    volumes:
-      - taskcafe-uploads:/root/uploads
-      
   postgres:
     image: postgres:12.3-alpine
     restart: always
@@ -30,8 +27,6 @@ services:
 volumes:
   taskcafe-postgres:
     external: false
-  taskcafe-uploads:
-    external: false
 
 networks:
   taskcafe-test:

frontend/.eslintrc.json

@@ -25,7 +25,6 @@
   ],
   "rules": {
     "prettier/prettier": "warn",
-    "no-shadow": "off",
     "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-explicit-any": "off",
@@ -35,7 +34,6 @@
     "no-case-declarations": "off",
     "no-plusplus": "off",
     "react/prop-types": 0,
-    "react/no-unused-prop-types": "off",
     "no-continue": "off",
     "react/jsx-props-no-spreading": "off",
     "no-param-reassign": "off",

frontend/codegen.yml

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

frontend/package.json

@@ -13,10 +13,10 @@
     "@types/jest": "^26.0.23",
     "@types/lodash": "^4.14.168",
     "@types/node": "^15.0.1",
-    "@types/react": "^17.0.20",
+    "@types/react": "^17.0.4",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-datepicker": "^3.1.8",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^17.0.3",
     "@types/react-router": "^5.1.13",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-select": "^4.0.15",
@@ -43,8 +43,6 @@
     "immer": "^9.0.2",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "loglevel": "^1.7.1",
-    "loglevel-plugin-remote": "^0.6.8",
     "node-emoji": "^1.10.0",
     "prop-types": "^15.7.2",
     "query-string": "^7.0.0",
@@ -64,8 +62,7 @@
     "react-toastify": "^7.0.4",
     "rich-markdown-editor": "^11.17.4-0",
     "styled-components": "^5.2.3",
-    "typescript": "~4.2.4",
-    "unist-util-visit": "^4.0.0"
+    "typescript": "~4.2.4"
   },
   "proxy": "http://localhost:3333",
   "scripts": {

frontend/src/Admin/index.tsx

@@ -12,7 +12,7 @@ import {
 } from 'shared/generated/graphql';
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
-import { useForm, Controller, UseFormSetError } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import produce from 'immer';
 import updateApolloCache from 'shared/utils/cache';
@@ -20,7 +20,6 @@ import { useCurrentUser } from 'App/context';
 import { Redirect } from 'react-router';
 import NOOP from 'shared/utils/noop';
 import ControlledInput from 'shared/components/ControlledInput';
-import FormInput from 'shared/components/FormInput';
 
 const DeleteUserWrapper = styled.div`
   display: flex;
@@ -78,7 +77,7 @@ const CreateUserButton = styled(Button)`
   width: 100%;
 `;
 
-const AddUserInput = styled(FormInput)`
+const AddUserInput = styled(ControlledInput)`
   margin-bottom: 8px;
 `;
 
@@ -88,7 +87,7 @@ const InputError = styled.span`
 `;
 
 type AddUserPopupProps = {
-  onAddUser: (user: CreateUserData, setError: UseFormSetError<CreateUserData>) => void;
+  onAddUser: (user: CreateUserData) => void;
 };
 
 const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
@@ -96,16 +95,16 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
     register,
     handleSubmit,
     formState: { errors },
-    setError,
     control,
   } = useForm<CreateUserData>();
 
   const createUser = (data: CreateUserData) => {
-    onAddUser(data, setError);
+    onAddUser(data);
   };
   return (
     <CreateUserForm onSubmit={handleSubmit(createUser)}>
       <AddUserInput
+        floatingLabel
         width="100%"
         label="Full Name"
         variant="alternate"
@@ -119,7 +118,6 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
         variant="alternate"
         {...register('email', { required: 'Email is required' })}
       />
-      {errors.email && <InputError>{errors.email.message}</InputError>}
       <Controller
         control={control}
         name="roleCode"
@@ -225,7 +223,7 @@ TODO: add permision check
           users={data.users}
           invitedUsers={data.invitedUsers}
           // canInviteUser={user.roles.org === 'admin'} TODO: add permision check
-          canInviteUser
+          canInviteUser={true}
           onInviteUser={NOOP}
           onUpdateUserPassword={() => {
             hidePopup();
@@ -243,15 +241,10 @@ TODO: add permision check
               $target,
               <Popup tab={0} title="Add member" onClose={() => hidePopup()}>
                 <AddUserPopup
-                  onAddUser={(u, setError) => {
+                  onAddUser={(u) => {
                     const { roleCode, ...userData } = u;
-                    createUser({
-                      variables: { ...userData, roleCode: roleCode.value },
-                    })
-                      .then(() => hidePopup())
-                      .catch((e) => {
-                        setError('email', { type: 'validate', message: e.message });
-                      });
+                    createUser({ variables: { ...userData, roleCode: roleCode.value } });
+                    hidePopup();
                   }}
                 />
               </Popup>,

frontend/src/App/Routes.tsx

@@ -32,6 +32,7 @@ type ValidateTokenResponse = {
 const UserRequiredRoute: React.FC<any> = ({ children }) => {
   const { user } = useCurrentUser();
   const location = useLocation();
+  console.log('user required', user);
   if (user) {
     return children;
   }
@@ -61,6 +62,7 @@ const Routes: React.FC = () => {
       setLoading(false);
     });
   }, []);
+  console.log('loading', loading);
   if (loading) return null;
   return (
     <Switch>
@@ -69,10 +71,11 @@ const Routes: React.FC = () => {
       <Route exact path="/confirm" component={Confirm} />
       <Switch>
         <MainContent>
-          <Route path="/p/:projectID" component={Project} />
+          <Route path="/projects/:projectID" component={Project} />
 
           <UserRequiredRoute>
-            <Route exact path="/" component={Projects} />
+            <Route exact path="/" component={Dashboard} />
+            <Route exact path="/projects" component={Projects} />
             <Route path="/teams/:teamID" component={Teams} />
             <Route path="/profile" component={Profile} />
             <Route path="/admin" component={Admin} />

frontend/src/App/TopNavbar/index.tsx

@@ -1,16 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
 import LoggedOutNavbar from 'shared/components/TopNavbar/LoggedOut';
 import { ProfileMenu } from 'shared/components/DropdownMenu';
-import polling from 'shared/utils/polling';
 import { useHistory, useRouteMatch } from 'react-router';
 import { useCurrentUser } from 'App/context';
-import {
-  RoleCode,
-  useTopNavbarQuery,
-  useNotificationAddedSubscription,
-  useHasUnreadNotificationsQuery,
-} from 'shared/generated/graphql';
+import { RoleCode, useTopNavbarQuery } from 'shared/generated/graphql';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import MiniProfile from 'shared/components/MiniProfile';
 import cache from 'App/cache';
@@ -55,33 +49,15 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
   onRemoveInvitedFromBoard,
   onRemoveFromBoard,
 }) => {
-  const [notifications, setNotifications] = useState<Array<{ id: string; notification: { actionType: string } }>>([]);
-  const { data } = useTopNavbarQuery({
-    onCompleted: (d) => {
-      setNotifications((n) => [...n, ...d.notifications]);
-    },
-  });
-  const { data: nData, loading } = useNotificationAddedSubscription({
-    onSubscriptionData: (d) => {
-      setNotifications((n) => {
-        if (d.subscriptionData.data) {
-          return [...n, d.subscriptionData.data.notificationAdded];
-        }
-        return n;
-      });
-    },
-  });
+  const { data } = useTopNavbarQuery();
   const { showPopup, hidePopup } = usePopup();
   const { setUser } = useCurrentUser();
-  const { data: unreadData, refetch: refetchHasUnread } = useHasUnreadNotificationsQuery({
-    pollInterval: polling.UNREAD_NOTIFICATIONS,
-  });
   const history = useHistory();
   const onLogout = () => {
     fetch('/auth/logout', {
       method: 'POST',
       credentials: 'include',
-    }).then(async (x) => {
+    }).then(async x => {
       const { status } = x;
       if (status === 200) {
         cache.reset();
@@ -118,20 +94,29 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
     }
   };
 
-  // TODO: rewrite popup to contain subscription and notification fetch
   const onNotificationClick = ($target: React.RefObject<HTMLElement>) => {
-    showPopup($target, <NotificationPopup onToggleRead={() => refetchHasUnread()} />, {
-      width: 605,
-      borders: false,
-      diamondColor: theme.colors.primary,
-    });
+    if (data) {
+      showPopup(
+        $target,
+        <NotificationPopup>
+          {data.notifications.map(notification => (
+            <NotificationItem
+              title={notification.entity.name}
+              description={`${notification.actor.name} added you as a meber to the task "${notification.entity.name}"`}
+              createdAt={notification.createdAt}
+            />
+          ))}
+        </NotificationPopup>,
+        { width: 415, borders: false, diamondColor: theme.colors.primary },
+      );
+    }
   };
 
   // TODO: readd permision check
   // const userIsTeamOrProjectAdmin = user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID);
   const userIsTeamOrProjectAdmin = true;
   const onInvitedMemberProfile = ($targetRef: React.RefObject<HTMLElement>, email: string) => {
-    const member = projectInvitedMembers ? projectInvitedMembers.find((u) => u.email === email) : null;
+    const member = projectInvitedMembers ? projectInvitedMembers.find(u => u.email === email) : null;
     if (member) {
       showPopup(
         $targetRef,
@@ -159,7 +144,7 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
   };
 
   const onMemberProfile = ($targetRef: React.RefObject<HTMLElement>, memberID: string) => {
-    const member = projectMembers ? projectMembers.find((u) => u.id === memberID) : null;
+    const member = projectMembers ? projectMembers.find(u => u.id === memberID) : null;
     const warning =
       'You can’t leave because you are the only admin. To make another user an admin, click their avatar, select “Change permissions…”, and select “Admin”.';
     if (member) {
@@ -168,7 +153,7 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
         <MiniProfile
           warning={member.role && member.role.code === 'owner' ? warning : null}
           canChangeRole={userIsTeamOrProjectAdmin}
-          onChangeRole={(roleCode) => {
+          onChangeRole={roleCode => {
             if (onChangeRole) {
               onChangeRole(member.id, roleCode);
             }
@@ -194,10 +179,9 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
   return (
     <>
       <TopNavbar
-        hasUnread={unreadData ? unreadData.hasUnreadNotifications.unread : false}
         name={name}
         menuType={menuType}
-        onOpenProjectFinder={($target) => {
+        onOpenProjectFinder={$target => {
           showPopup(
             $target,
             <Popup tab={0} title={null}>

frontend/src/Auth/Styles.ts

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

frontend/src/Auth/index.tsx

@@ -9,6 +9,7 @@ const Auth = () => {
   const history = useHistory();
   const location = useLocation<{ redirect: string } | undefined>();
   const { setUser } = useContext(UserContext);
+  console.log('auth');
   const login = (
     data: LoginFormData,
     setComplete: (val: boolean) => void,

frontend/src/Confirm/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import Confirm from 'shared/components/Confirm';
 import { useHistory, useLocation } from 'react-router';
 import * as QueryString from 'query-string';
@@ -9,16 +9,20 @@ const UsersConfirm = () => {
   const history = useHistory();
   const location = useLocation();
   const params = QueryString.parse(location.search);
-  const [hasFailed, setFailed] = useState(false);
   const { setUser } = useCurrentUser();
-  useEffect(() => {
+  return (
+    <Container>
+      <LoginWrapper>
+        <Confirm
+          hasConfirmToken={params.confirmToken !== undefined}
+          onConfirmUser={setFailed => {
             fetch('/auth/confirm', {
               method: 'POST',
               body: JSON.stringify({
                 confirmToken: params.confirmToken,
               }),
             })
-      .then(async (x) => {
+              .then(async x => {
                 const { status } = x;
                 if (status === 200) {
                   const response = await x.json();
@@ -26,17 +30,14 @@ const UsersConfirm = () => {
                   setUser(userID);
                   history.push('/');
                 } else {
-          setFailed(true);
+                  setFailed();
                 }
               })
               .catch(() => {
-        setFailed(false);
+                setFailed();
               });
-  }, []);
-  return (
-    <Container>
-      <LoginWrapper>
-        <Confirm hasConfirmToken={params.confirmToken !== undefined} hasFailed={hasFailed} />
+          }}
+        />
       </LoginWrapper>
     </Container>
   );

frontend/src/MyTasks/index.tsx

@@ -26,10 +26,10 @@ import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import DueDateManager from 'shared/components/DueDateManager';
 import dayjs from 'dayjs';
 import useStickyState from 'shared/hooks/useStickyState';
-import { StaticContext } from 'react-router';
 import MyTasksSortPopup from './MyTasksSort';
 import MyTasksStatusPopup from './MyTasksStatus';
 import TaskEntry from './TaskEntry';
+import { StaticContext } from 'react-router';
 
 type TaskRouteProps = {
   taskID: string;
@@ -562,36 +562,13 @@ const Projects = () => {
             onCancel={() => null}
             onDueDateChange={(task, dueDate, hasTime) => {
               if (dateEditor.task) {
-                hidePopup();
-                updateTaskDueDate({
-                  variables: {
-                    taskID: dateEditor.task.id,
-                    dueDate,
-                    hasTime,
-                    deleteNotifications: [],
-                    updateNotifications: [],
-                    createNotifications: [],
-                  },
-                });
-                setDateEditor((prev) => ({
-                  ...prev,
-                  task: { ...task, dueDate: { at: dueDate.toISOString(), notifications: [] }, hasTime },
-                }));
+                updateTaskDueDate({ variables: { taskID: dateEditor.task.id, dueDate, hasTime } });
+                setDateEditor((prev) => ({ ...prev, task: { ...task, dueDate: dueDate.toISOString(), hasTime } }));
               }
             }}
             onRemoveDueDate={(task) => {
               if (dateEditor.task) {
-                hidePopup();
-                updateTaskDueDate({
-                  variables: {
-                    taskID: dateEditor.task.id,
-                    dueDate: null,
-                    hasTime: false,
-                    deleteNotifications: [],
-                    updateNotifications: [],
-                    createNotifications: [],
-                  },
-                });
+                updateTaskDueDate({ variables: { taskID: dateEditor.task.id, dueDate: null, hasTime: false } });
                 setDateEditor((prev) => ({ ...prev, task: { ...task, hasTime: false } }));
               }
             }}
@@ -678,8 +655,8 @@ const Projects = () => {
               if (a.dueDate === null && b.dueDate === null) return 0;
               if (a.dueDate === null && b.dueDate !== null) return 1;
               if (a.dueDate !== null && b.dueDate === null) return -1;
-              const first = dayjs(a.dueDate.at);
-              const second = dayjs(b.dueDate.at);
+              const first = dayjs(a.dueDate);
+              const second = dayjs(b.dueDate);
               if (first.isSame(second, 'minute')) return 0;
               if (first.isAfter(second)) return -1;
               return 1;
@@ -815,19 +792,10 @@ const Projects = () => {
                                   history.push(`${match.url}/c/${task.id}`);
                                 }}
                                 onRemoveDueDate={() => {
-                                  updateTaskDueDate({
-                                    variables: {
-                                      taskID: task.id,
-                                      dueDate: null,
-                                      hasTime: false,
-                                      deleteNotifications: [],
-                                      updateNotifications: [],
-                                      createNotifications: [],
-                                    },
-                                  });
+                                  updateTaskDueDate({ variables: { taskID: task.id, dueDate: null, hasTime: false } });
                                 }}
                                 project={projectName ?? 'none'}
-                                dueDate={task.dueDate.at}
+                                dueDate={task.dueDate}
                                 hasTime={task.hasTime ?? false}
                                 name={task.name}
                                 onEditName={(name) => updateTaskName({ variables: { taskID: task.id, name } })}
@@ -853,9 +821,7 @@ const Projects = () => {
                 <EditorCell width={120}>
                   <DueDateEditorLabel>
                     {dateEditor.task.dueDate
-                      ? dayjs(dateEditor.task.dueDate.at).format(
-                          dateEditor.task.hasTime ? 'MMM D [at] h:mm A' : 'MMM D',
-                        )
+                      ? dayjs(dateEditor.task.dueDate).format(dateEditor.task.hasTime ? 'MMM D [at] h:mm A' : 'MMM D')
                       : ''}
                   </DueDateEditorLabel>
                 </EditorCell>

frontend/src/Profile/index.tsx

@@ -44,7 +44,7 @@ const Projects = () => {
         name="file"
         style={{ display: 'none' }}
         ref={$fileUpload}
-        onChange={(e) => {
+        onChange={e => {
           if (e.target.files) {
             const fileData = new FormData();
             fileData.append('file', e.target.files[0]);
@@ -52,7 +52,7 @@ const Projects = () => {
               .post('/users/me/avatar', fileData, {
                 withCredentials: true,
               })
-              .then((res) => {
+              .then(res => {
                 if ($fileUpload && $fileUpload.current) {
                   $fileUpload.current.value = '';
                   refetch();
@@ -77,7 +77,7 @@ const Projects = () => {
           }}
           onChangeUserInfo={(d, done) => {
             updateUserInfo({
-              variables: { name: d.fullName, bio: d.bio, email: d.email, initials: d.initials },
+              variables: { name: d.full_name, bio: d.bio, email: d.email, initials: d.initials },
             });
             toast('User info was saved!');
             done();

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

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

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

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

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

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

@@ -49,9 +49,9 @@ import LabelManagerEditor from 'Projects/Project/LabelManagerEditor';
 import Chip from 'shared/components/Chip';
 import { toast } from 'react-toastify';
 import { useCurrentUser } from 'App/context';
-import ControlStatus from './ControlStatus';
-import ControlFilter from './ControlFilter';
-import ControlSort from './ControlSort';
+import FilterStatus from './FilterStatus';
+import FilterMeta from './FilterMeta';
+import SortPopup from './SortPopup';
 
 const FilterChip = styled(Chip)`
   margin-right: 4px;
@@ -60,20 +60,19 @@ const FilterChip = styled(Chip)`
 type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void;
 
 const renderTaskSortingLabel = (sorting: TaskSorting) => {
-  switch (sorting.type) {
-    case TaskSortingType.TASK_TITLE:
-      return 'Sort: Task Title';
-    case TaskSortingType.MEMBERS:
-      return 'Sort: Members';
-    case TaskSortingType.DUE_DATE:
-      return 'Sort: Due Date';
-    case TaskSortingType.LABELS:
-      return 'Sort: Labels';
-    case TaskSortingType.COMPLETE:
-      return 'Sort: Complete';
-    default:
-      return 'Sort';
+  if (sorting.type === TaskSortingType.TASK_TITLE) {
+    return 'Sort: Card title';
   }
+  if (sorting.type === TaskSortingType.MEMBERS) {
+    return 'Sort: Members';
+  }
+  if (sorting.type === TaskSortingType.DUE_DATE) {
+    return 'Sort: Due Date';
+  }
+  if (sorting.type === TaskSortingType.LABELS) {
+    return 'Sort: Labels';
+  }
+  return 'Sort';
 };
 
 const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn) => {
@@ -137,16 +136,16 @@ const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
   display: flex;
   align-items: center;
   font-size: 15px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
 
   &:not(:last-of-type) {
     margin-right: 16px;
   }
 
   &:hover {
-    color: ${(props) => props.theme.colors.text.secondary};
+    color: ${props => props.theme.colors.text.secondary};
   }
-  ${(props) =>
+  ${props =>
     props.disabled &&
     css`
       opacity: 0.5;
@@ -281,8 +280,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
             draftCache.findProject.taskGroups = draftCache.findProject.taskGroups.filter(
               (taskGroup: TaskGroup) => taskGroup.id !== deletedTaskGroupData.data?.deleteTaskGroup.taskGroup.id,
             );
@@ -297,10 +296,10 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
             const { taskGroups } = cache.findProject;
-            const idx = taskGroups.findIndex((taskGroup) => taskGroup.id === newTaskData.data?.createTask.taskGroup.id);
+            const idx = taskGroups.findIndex(taskGroup => taskGroup.id === newTaskData.data?.createTask.taskGroup.id);
             if (idx !== -1) {
               if (newTaskData.data) {
                 draftCache.findProject.taskGroups[idx].tasks.push({ ...newTaskData.data.createTask });
@@ -317,8 +316,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
             if (newTaskGroupData.data) {
               draftCache.findProject.taskGroups.push({ ...newTaskGroupData.data.createTaskGroup, tasks: [] });
             }
@@ -337,10 +336,10 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
             const idx = cache.findProject.taskGroups.findIndex(
-              (t) => t.id === resp.data?.deleteTaskGroupTasks.taskGroupID,
+              t => t.id === resp.data?.deleteTaskGroupTasks.taskGroupID,
             );
             if (idx !== -1) {
               draftCache.findProject.taskGroups[idx].tasks = [];
@@ -354,8 +353,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
             if (resp.data) {
               draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
             }
@@ -372,8 +371,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
             if (newTask.data) {
               const { previousTaskGroupID, task } = newTask.data.updateTaskLocation;
               if (previousTaskGroupID !== task.taskGroup.id) {
@@ -381,9 +380,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                 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,
-                  );
+                  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,
                   );
@@ -404,14 +401,14 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
   const { user } = useCurrentUser();
   const [deleteTask] = useDeleteTaskMutation();
   const [toggleTaskLabel] = useToggleTaskLabelMutation({
-    onCompleted: (newTaskLabel) => {
+    onCompleted: newTaskLabel => {
       taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
     },
   });
 
   const onCreateTask = (taskGroupID: string, name: string) => {
     if (data) {
-      const taskGroup = data.findProject.taskGroups.find((t) => t.id === taskGroupID);
+      const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
       if (taskGroup) {
         let position = 65535;
         if (taskGroup.tasks.length !== 0) {
@@ -429,9 +426,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
             createTask: {
               __typename: 'Task',
               id: `${Math.round(Math.random() * -1000000)}`,
-              shortId: '',
               name,
-              watched: false,
               complete: false,
               completedAt: null,
               hasTime: false,
@@ -446,7 +441,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                 checklist: null,
               },
               position,
-              dueDate: { at: null },
+              dueDate: null,
               description: null,
               labels: [],
               assigned: [],
@@ -477,13 +472,12 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
     }
     return 'All Tasks';
   };
-
   if (data) {
     labelsRef.current = data.findProject.labels;
     membersRef.current = data.findProject.members;
     const onQuickEditorOpen = ($target: React.RefObject<HTMLElement>, taskID: string, taskGroupID: string) => {
-      const taskGroup = data.findProject.taskGroups.find((t) => t.id === taskGroupID);
-      const currentTask = taskGroup ? taskGroup.tasks.find((t) => t.id === taskID) : null;
+      const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
+      const currentTask = taskGroup ? taskGroup.tasks.find(t => t.id === taskID) : null;
       if (currentTask) {
         setQuickCardEditor({
           target: $target,
@@ -495,9 +489,9 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
     };
     let currentQuickTask = null;
     if (quickCardEditor.taskID && quickCardEditor.taskGroupID) {
-      const targetGroup = data.findProject.taskGroups.find((t) => t.id === quickCardEditor.taskGroupID);
+      const targetGroup = data.findProject.taskGroups.find(t => t.id === quickCardEditor.taskGroupID);
       if (targetGroup) {
-        currentQuickTask = targetGroup.tasks.find((t) => t.id === quickCardEditor.taskID);
+        currentQuickTask = targetGroup.tasks.find(t => t.id === quickCardEditor.taskID);
       }
     }
     return (
@@ -505,13 +499,13 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         <ProjectBar>
           <ProjectActions>
             <ProjectAction
-              onClick={(target) => {
+              onClick={target => {
                 showPopup(
                   target,
                   <Popup tab={0} title={null}>
-                    <ControlStatus
+                    <FilterStatus
                       filter={taskStatusFilter}
-                      onChangeTaskStatusFilter={(filter) => {
+                      onChangeTaskStatusFilter={filter => {
                         setTaskStatusFilter(filter);
                         hidePopup();
                       }}
@@ -525,13 +519,13 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               <ProjectActionText>{getTaskStatusFilterLabel(taskStatusFilter)}</ProjectActionText>
             </ProjectAction>
             <ProjectAction
-              onClick={(target) => {
+              onClick={target => {
                 showPopup(
                   target,
                   <Popup tab={0} title={null}>
-                    <ControlSort
+                    <SortPopup
                       sorting={taskSorting}
-                      onChangeTaskSorting={(sorting) => {
+                      onChangeTaskSorting={sorting => {
                         setTaskSorting(sorting);
                       }}
                     />
@@ -544,16 +538,16 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               <ProjectActionText>{renderTaskSortingLabel(taskSorting)}</ProjectActionText>
             </ProjectAction>
             <ProjectAction
-              onClick={(target) => {
+              onClick={target => {
                 showPopup(
                   target,
-                  <ControlFilter
+                  <FilterMeta
                     filters={taskMetaFilters}
-                    onChangeTaskMetaFilter={(filter) => {
+                    onChangeTaskMetaFilter={filter => {
                       setTaskMetaFilters(filter);
                     }}
                     userID={user ?? ''}
-                    projectID={projectID}
+                    labels={labelsRef}
                     members={membersRef}
                   />,
                   { width: 200 },
@@ -565,11 +559,11 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
             </ProjectAction>
             {renderMetaFilters(taskMetaFilters, (meta, id) => {
               setTaskMetaFilters(
-                produce(taskMetaFilters, (draftFilters) => {
+                produce(taskMetaFilters, draftFilters => {
                   if (meta === TaskMeta.MEMBER) {
-                    draftFilters.members = draftFilters.members.filter((m) => m.id !== id);
+                    draftFilters.members = draftFilters.members.filter(m => m.id !== id);
                   } else if (meta === TaskMeta.LABEL) {
-                    draftFilters.labels = draftFilters.labels.filter((m) => m.id !== id);
+                    draftFilters.labels = draftFilters.labels.filter(m => m.id !== id);
                   } else if (meta === TaskMeta.TITLE) {
                     draftFilters.taskName = null;
                   } else if (meta === TaskMeta.DUE_DATE) {
@@ -582,10 +576,15 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
           {user && (
             <ProjectActions>
               <ProjectAction
-                onClick={($labelsRef) => {
+                onClick={$labelsRef => {
                   showPopup(
                     $labelsRef,
-                    <LabelManagerEditor taskLabels={null} labelColors={data.labelColors} projectID={projectID ?? ''} />,
+                    <LabelManagerEditor
+                      taskLabels={null}
+                      labelColors={data.labelColors}
+                      labels={labelsRef}
+                      projectID={projectID ?? ''}
+                    />,
                   );
                 }}
               >
@@ -605,8 +604,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         </ProjectBar>
         <SimpleLists
           isPublic={user === null}
-          onTaskClick={(task) => {
-            history.push(`${match.url}/c/${task.shortId}`);
+          onTaskClick={task => {
+            history.push(`${match.url}/c/${task.id}`);
           }}
           onCardLabelClick={onCardLabelClick ?? NOOP}
           cardLabelVariant={cardLabelVariant ?? 'large'}
@@ -638,7 +637,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               },
             });
           }}
-          onTaskGroupDrop={(droppedTaskGroup) => {
+          onTaskGroupDrop={droppedTaskGroup => {
             updateTaskGroupLocation({
               variables: { taskGroupID: droppedTaskGroup.id, position: droppedTaskGroup.position },
               optimisticResponse: {
@@ -658,7 +657,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
           onCreateTask={onCreateTask}
           onCreateTaskGroup={onCreateList}
           onCardMemberClick={($targetRef, _taskID, memberID) => {
-            const member = data.findProject.members.find((m) => m.id === memberID);
+            const member = data.findProject.members.find(m => m.id === memberID);
             if (member) {
               showPopup(
                 $targetRef,
@@ -685,8 +684,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                   deleteTaskGroupTasks({ variables: { taskGroupID } });
                   hidePopup();
                 }}
-                onSortTaskGroup={(taskSort) => {
-                  const taskGroup = data.findProject.taskGroups.find((t) => t.id === taskGroupID);
+                onSortTaskGroup={taskSort => {
+                  const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
                   if (taskGroup) {
                     const tasks: Array<{ taskID: string; position: number }> = taskGroup.tasks
                       .sort((a, b) => sortTasks(a, b, taskSort))
@@ -698,8 +697,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                     hidePopup();
                   }
                 }}
-                onDuplicateTaskGroup={(newName) => {
-                  const idx = data.findProject.taskGroups.findIndex((t) => t.id === taskGroupID);
+                onDuplicateTaskGroup={newName => {
+                  const idx = data.findProject.taskGroups.findIndex(t => t.id === taskGroupID);
                   if (idx !== -1) {
                     const taskGroups = data.findProject.taskGroups.sort((a, b) => a.position - b.position);
                     const prevPos = taskGroups[idx].position;
@@ -712,7 +711,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                     hidePopup();
                   }
                 }}
-                onArchiveTaskGroup={(tgID) => {
+                onArchiveTaskGroup={tgID => {
                   deleteTaskGroup({ variables: { taskGroupID: tgID } });
                   hidePopup();
                 }}
@@ -746,7 +745,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               );
             }}
             onCardMemberClick={($targetRef, _taskID, memberID) => {
-              const member = data.findProject.members.find((m) => m.id === memberID);
+              const member = data.findProject.members.find(m => m.id === memberID);
               if (member) {
                 showPopup(
                   $targetRef,
@@ -765,11 +764,12 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               showPopup(
                 $targetRef,
                 <LabelManagerEditor
-                  onLabelToggle={(labelID) => {
+                  onLabelToggle={labelID => {
                     toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
                   }}
                   taskID={task.id}
                   labelColors={data.labelColors}
+                  labels={labelsRef}
                   taskLabels={taskLabelsRef}
                   projectID={projectID ?? ''}
                 />,
@@ -778,15 +778,15 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
             onArchiveCard={(_listId: string, cardId: string) => {
               return deleteTask({
                 variables: { taskID: cardId },
-                update: (client) => {
+                update: client => {
                   updateApolloCache<FindProjectQuery>(
                     client,
                     FindProjectDocument,
-                    (cache) =>
-                      produce(cache, (draftCache) => {
-                        draftCache.findProject.taskGroups = cache.findProject.taskGroups.map((taskGroup) => ({
+                    cache =>
+                      produce(cache, draftCache => {
+                        draftCache.findProject.taskGroups = cache.findProject.taskGroups.map(taskGroup => ({
                           ...taskGroup,
-                          tasks: taskGroup.tasks.filter((t) => t.id !== cardId),
+                          tasks: taskGroup.tasks.filter(t => t.id !== cardId),
                         }));
                       }),
                     { projectID },
@@ -800,38 +800,20 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                 <Popup title="Change Due Date" tab={0} onClose={() => hidePopup()}>
                   <DueDateManager
                     task={task}
-                    onRemoveDueDate={(t) => {
-                      hidePopup();
-                      updateTaskDueDate({
-                        variables: {
-                          taskID: t.id,
-                          dueDate: null,
-                          hasTime: false,
-                          deleteNotifications: [],
-                          updateNotifications: [],
-                          createNotifications: [],
-                        },
-                      });
+                    onRemoveDueDate={t => {
+                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: null, hasTime: false } });
+                      // hidePopup();
                     }}
                     onDueDateChange={(t, newDueDate, hasTime) => {
-                      hidePopup();
-                      updateTaskDueDate({
-                        variables: {
-                          taskID: t.id,
-                          dueDate: newDueDate,
-                          hasTime,
-                          deleteNotifications: [],
-                          updateNotifications: [],
-                          createNotifications: [],
-                        },
-                      });
+                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate, hasTime } });
+                      // hidePopup();
                     }}
                     onCancel={NOOP}
                   />
                 </Popup>,
               );
             }}
-            onToggleComplete={(task) => {
+            onToggleComplete={task => {
               setTaskComplete({ variables: { taskID: task.id, complete: !task.complete } });
             }}
             target={quickCardEditor.target}

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

@@ -7,12 +7,10 @@ import MemberManager from 'shared/components/MemberManager';
 import { useRouteMatch, useHistory, useParams } from 'react-router';
 import {
   useDeleteTaskChecklistMutation,
-  useToggleTaskWatchMutation,
   useUpdateTaskChecklistNameMutation,
   useUpdateTaskChecklistItemLocationMutation,
   useCreateTaskChecklistMutation,
   useFindTaskQuery,
-  DueDateNotificationDuration,
   useUpdateTaskDueDateMutation,
   useSetTaskCompleteMutation,
   useAssignTaskMutation,
@@ -218,7 +216,6 @@ const Details: React.FC<DetailsProps> = ({
       );
     },
   });
-  const [toggleTaskWatch] = useToggleTaskWatchMutation();
   const [createTaskComment] = useCreateTaskCommentMutation({
     update: (client, response) => {
       updateApolloCache<FindTaskQuery>(
@@ -443,19 +440,6 @@ const Details: React.FC<DetailsProps> = ({
                 );
               }}
               task={data.findTask}
-              onToggleTaskWatch={(task, watched) => {
-                toggleTaskWatch({
-                  variables: { taskID: task.id },
-                  optimisticResponse: {
-                    __typename: 'Mutation',
-                    toggleTaskWatch: {
-                      id: task.id,
-                      __typename: 'Task',
-                      watched,
-                    },
-                  },
-                });
-              }}
               onCreateComment={(task, message) => {
                 createTaskComment({ variables: { taskID: task.id, message } });
               }}
@@ -556,8 +540,7 @@ const Details: React.FC<DetailsProps> = ({
                         bio="None"
                         onRemoveFromTask={() => {
                           if (user) {
-                            unassignTask({ variables: { taskID: data.findTask.id, userID: member.id ?? '' } });
-                            hidePopup();
+                            unassignTask({ variables: { taskID: data.findTask.id, userID: user ?? '' } });
                           }
                         }}
                       />
@@ -648,79 +631,12 @@ const Details: React.FC<DetailsProps> = ({
                     <DueDateManager
                       task={task}
                       onRemoveDueDate={(t) => {
-                        updateTaskDueDate({
-                          variables: {
-                            taskID: t.id,
-                            dueDate: null,
-                            hasTime: false,
-                            deleteNotifications: t.dueDate.notifications
-                              ? t.dueDate.notifications.map((n) => ({ id: n.id }))
-                              : [],
-                            updateNotifications: [],
-                            createNotifications: [],
-                          },
-                        });
-                        hidePopup();
+                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: null, hasTime: false } });
+                        // hidePopup();
                       }}
-                      onDueDateChange={(t, newDueDate, hasTime, notifications) => {
-                        const updatedNotifications = notifications.current
-                          .filter((c) => c.externalId !== null)
-                          .map((c) => {
-                            let duration = DueDateNotificationDuration.Minute;
-                            switch (c.duration.value) {
-                              case 'hour':
-                                duration = DueDateNotificationDuration.Hour;
-                                break;
-                              case 'day':
-                                duration = DueDateNotificationDuration.Day;
-                                break;
-                              case 'week':
-                                duration = DueDateNotificationDuration.Week;
-                                break;
-                              default:
-                                break;
-                            }
-                            return {
-                              id: c.externalId ?? '',
-                              period: c.period,
-                              duration,
-                            };
-                          });
-                        const newNotifications = notifications.current
-                          .filter((c) => c.externalId === null)
-                          .map((c) => {
-                            let duration = DueDateNotificationDuration.Minute;
-                            switch (c.duration.value) {
-                              case 'hour':
-                                duration = DueDateNotificationDuration.Hour;
-                                break;
-                              case 'day':
-                                duration = DueDateNotificationDuration.Day;
-                                break;
-                              case 'week':
-                                duration = DueDateNotificationDuration.Week;
-                                break;
-                              default:
-                                break;
-                            }
-                            return {
-                              taskID: task.id,
-                              period: c.period,
-                              duration,
-                            };
-                          });
-                        // const updatedNotifications = notifications.filter(c => c.externalId === null);
-                        updateTaskDueDate({
-                          variables: {
-                            taskID: t.id,
-                            dueDate: newDueDate,
-                            hasTime,
-                            createNotifications: newNotifications,
-                            updateNotifications: updatedNotifications,
-                            deleteNotifications: notifications.removed.map((n) => ({ id: n })),
-                          },
-                        });
-                        hidePopup();
+                      onDueDateChange={(t, newDueDate, hasTime) => {
+                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate, hasTime } });
+                        // hidePopup();
                       }}
                       onCancel={NOOP}
                     />

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

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

frontend/src/Projects/Project/index.tsx

@@ -31,11 +31,11 @@ import produce from 'immer';
 import NOOP from 'shared/utils/noop';
 import useStateWithLocalStorage from 'shared/hooks/useStateWithLocalStorage';
 import localStorage from 'shared/utils/localStorage';
-import polling from 'shared/utils/polling';
 import Board, { BoardLoading } from './Board';
 import Details from './Details';
 import LabelManagerEditor from './LabelManagerEditor';
 import UserManagementPopup from './UserManagementPopup';
+import polling from 'shared/utils/polling';
 
 type TaskRouteProps = {
   taskID: string;
@@ -87,7 +87,7 @@ const Project = () => {
               }
             }
           }),
-        { projectID: data ? data.findProject.id : '' },
+        { projectID },
       ),
   });
 
@@ -100,7 +100,7 @@ const Project = () => {
           produce(cache, (draftCache) => {
             draftCache.findProject.name = newName.data?.updateProjectName.name ?? '';
           }),
-        { projectID: data ? data.findProject.id : '' },
+        { projectID },
       );
     },
   });
@@ -123,7 +123,7 @@ const Project = () => {
               ];
             }
           }),
-        { projectID: data ? data.findProject.id : '' },
+        { projectID },
       );
     },
   });
@@ -138,7 +138,7 @@ const Project = () => {
               (m) => m.email !== response.data?.deleteInvitedProjectMember.invitedMember.email ?? '',
             );
           }),
-        { projectID: data ? data.findProject.id : '' },
+        { projectID },
       );
     },
   });
@@ -153,7 +153,7 @@ const Project = () => {
               (m) => m.id !== response.data?.deleteProjectMember.member.id,
             );
           }),
-        { projectID: data ? data.findProject.id : '' },
+        { projectID },
       );
     },
   });
@@ -171,29 +171,29 @@ const Project = () => {
       <>
         <GlobalTopNavbar
           onChangeRole={(userID, roleCode) => {
-            updateProjectMemberRole({ variables: { userID, roleCode, projectID: data ? data.findProject.id : '' } });
+            updateProjectMemberRole({ variables: { userID, roleCode, projectID } });
           }}
           onChangeProjectOwner={() => {
             hidePopup();
           }}
           onRemoveFromBoard={(userID) => {
-            deleteProjectMember({ variables: { userID, projectID: data ? data.findProject.id : '' } });
+            deleteProjectMember({ variables: { userID, projectID } });
             hidePopup();
           }}
           onRemoveInvitedFromBoard={(email) => {
-            deleteInvitedProjectMember({ variables: { projectID: data ? data.findProject.id : '', email } });
+            deleteInvitedProjectMember({ variables: { projectID, email } });
             hidePopup();
           }}
           onSaveProjectName={(projectName) => {
-            updateProjectName({ variables: { projectID: data ? data.findProject.id : '', name: projectName } });
+            updateProjectName({ variables: { projectID, name: projectName } });
           }}
           onInviteUser={($target) => {
             showPopup(
               $target,
               <UserManagementPopup
-                projectID={data ? data.findProject.id : ''}
+                projectID={projectID}
                 onInviteProjectMembers={(members) => {
-                  inviteProjectMembers({ variables: { projectID: data ? data.findProject.id : '', members } });
+                  inviteProjectMembers({ variables: { projectID, members } });
                   hidePopup();
                 }}
                 users={data.users}
@@ -269,6 +269,7 @@ const Project = () => {
                       }}
                       taskID={task.id}
                       labelColors={data.labelColors}
+                      labels={labelsRef}
                       taskLabels={taskLabelsRef}
                       projectID={projectID}
                     />,

frontend/src/Projects/index.tsx

@@ -9,7 +9,6 @@ import {
   GetProjectsDocument,
   GetProjectsQuery,
 } from 'shared/generated/graphql';
-import FormInput from 'shared/components/FormInput';
 
 import { Link } from 'react-router-dom';
 import NewProject from 'shared/components/NewProject';
@@ -53,7 +52,7 @@ const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
   return (
     <CreateTeamFormContainer onSubmit={handleSubmit(createTeam)}>
       {errors.name && <ErrorText>{errors.name.message}</ErrorText>}
-      <FormInput width="100%" label="Team name" variant="alternate" {...register('name')} />
+      <ControlledInput width="100%" label="Team name" variant="alternate" {...register('name')} />
       <CreateTeamButton type="submit">Create</CreateTeamButton>
     </CreateTeamFormContainer>
   );
@@ -307,7 +306,7 @@ const Projects = () => {
               <ProjectList>
                 {personalProjects.map((project, idx) => (
                   <ProjectListItem key={project.id}>
-                    <ProjectTile color={colors[idx % 5]} to={`/p/${project.shortId}`}>
+                    <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
                       <ProjectTileFade />
                       <ProjectTileDetails>
                         <ProjectTileName>{project.name}</ProjectTileName>
@@ -351,7 +350,7 @@ const Projects = () => {
                   <ProjectList>
                     {team.projects.map((project, idx) => (
                       <ProjectListItem key={project.id}>
-                        <ProjectTile color={colors[idx % 5]} to={`/p/${project.shortId}`}>
+                        <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
                           <ProjectTileFade />
                           <ProjectTileDetails>
                             <ProjectTileName>{project.name}</ProjectTileName>

frontend/src/Register/index.tsx

@@ -17,7 +17,6 @@ const UsersRegister = () => {
         <Register
           registered={registered}
           onSubmit={(data, setComplete, setError) => {
-            let isRedirected = false;
             if (data.password !== data.password_confirm) {
               setError('password', { type: 'error', message: 'Passwords must match' });
               setError('password_confirm', { type: 'error', message: 'Passwords must match' });
@@ -39,23 +38,20 @@ const UsersRegister = () => {
                 .then(async (x) => {
                   const response = await x.json();
                   const { setup } = response;
+                  console.log(response);
                   if (setup) {
                     history.replace(`/confirm?confirmToken=xxxx`);
-                    isRedirected = true;
                   } else if (params.confirmToken) {
                     history.replace(`/confirm?confirmToken=${params.confirmToken}`);
-                    isRedirected = true;
                   } else {
                     setRegistered(true);
                   }
                 })
-                .catch((e) => {
+                .catch(() => {
                   toast('There was an issue trying to register');
                 });
             }
-            if (!isRedirected) {
             setComplete(true);
-            }
           }}
         />
       </LoginWrapper>

frontend/src/Teams/Members/index.tsx

@@ -524,7 +524,7 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
                           members={data.findTeam.members}
                           warning={member.role && member.role.code === 'owner' ? warning : null}
                           // canChangeRole={user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID)} TODO: add permission check
-                          canChangeRole
+                          canChangeRole={true}
                           onChangeRole={(roleCode) => {
                             updateTeamMemberRole({ variables: { userID: member.id, teamID, roleCode } });
                           }}

frontend/src/index.tsx

@@ -10,26 +10,10 @@ import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import isBetween from 'dayjs/plugin/isBetween';
 import weekday from 'dayjs/plugin/weekday';
-import duration from 'dayjs/plugin/duration';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import log from 'loglevel';
-import remote from 'loglevel-plugin-remote';
 import cache from './App/cache';
 import App from './App';
 
-if (process.env.REACT_APP_NODE_ENV === 'production') {
-  remote.apply(log, { format: remote.json });
-  switch (process.env.REACT_APP_LOG_LEVEL) {
-    case 'info':
-      log.setLevel(log.levels.INFO);
-      break;
-    case 'debug':
-      log.setLevel(log.levels.DEBUG);
-      break;
-    default:
-      log.setLevel(log.levels.ERROR);
-  }
-}
+// https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
 
 enableMapSet();
 
@@ -38,8 +22,6 @@ dayjs.extend(weekday);
 dayjs.extend(isBetween);
 dayjs.extend(customParseFormat);
 dayjs.extend(updateLocale);
-dayjs.extend(duration);
-dayjs.extend(relativeTime);
 dayjs.updateLocale('en', {
   week: {
     dow: 1, // First day of week is Monday
@@ -48,6 +30,7 @@ dayjs.updateLocale('en', {
 });
 
 const client = new ApolloClient({ uri: '/graphql', cache });
+console.log('cloient', client);
 
 ReactDOM.render(
   <ApolloProvider client={client}>

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

@@ -10,215 +10,6 @@ import Button from 'shared/components/Button';
 import NOOP from 'shared/utils/noop';
 import { mixin } from 'shared/utils/styles';
 
-const UserSelect = styled(Select)`
-  margin: 8px 0;
-  padding: 8px 0;
-`;
-
-const NewUserPassInput = styled(Input)`
-  margin: 8px 0;
-`;
-
-const InviteMemberButton = styled(Button)`
-  padding: 7px 12px;
-`;
-
-const UserPassBar = styled.div`
-  display: flex;
-  padding-top: 8px;
-`;
-
-const UserPassConfirmButton = styled(Button)`
-  width: 100%;
-  padding: 7px 12px;
-`;
-
-const UserPassButton = styled(Button)`
-  width: 50%;
-  padding: 7px 12px;
-  & ~ & {
-    margin-left: 6px;
-  }
-`;
-
-const MemberItemOptions = styled.div``;
-
-const MemberItemOption = styled(Button)`
-  padding: 7px 9px;
-  margin: 4px 0 4px 8px;
-  float: left;
-  min-width: 95px;
-`;
-
-const MemberList = styled.div`
-  border-top: 1px solid ${(props) => props.theme.colors.border};
-`;
-
-const MemberListItem = styled.div`
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
-  border-bottom: 1px solid ${(props) => props.theme.colors.border};
-  min-height: 40px;
-  padding: 12px 0 12px 40px;
-  position: relative;
-`;
-
-const MemberListItemDetails = styled.div`
-  float: left;
-  flex: 1 0 auto;
-  padding-left: 8px;
-`;
-
-const InviteIcon = styled(UserPlus)`
-  padding-right: 4px;
-`;
-
-const MemberProfile = styled(TaskAssignee)`
-  position: absolute;
-  top: 16px;
-  left: 0;
-  margin: 0;
-`;
-
-const MemberItemName = styled.p`
-  color: ${(props) => props.theme.colors.text.secondary};
-`;
-
-const MemberItemUsername = styled.p`
-  color: ${(props) => props.theme.colors.text.primary};
-`;
-
-const MemberListHeader = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-const ListTitle = styled.h3`
-  font-size: 18px;
-  color: ${(props) => props.theme.colors.text.secondary};
-  margin-bottom: 12px;
-`;
-const ListDesc = styled.span`
-  font-size: 16px;
-  color: ${(props) => props.theme.colors.text.primary};
-`;
-const FilterSearch = styled(Input)`
-  margin: 0;
-`;
-
-const ListActions = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 8px;
-  margin-bottom: 18px;
-`;
-
-const MemberListWrapper = styled.div`
-  flex: 1 1;
-`;
-
-const Container = styled.div`
-  padding: 2.2rem;
-  display: flex;
-  width: 100%;
-  max-width: 1400px;
-  position: relative;
-  margin: 0 auto;
-`;
-
-const TabNav = styled.div`
-  float: left;
-  width: 220px;
-  height: 100%;
-  display: block;
-  position: relative;
-`;
-
-const TabNavContent = styled.ul`
-  display: block;
-  width: auto;
-  border-bottom: 0 !important;
-  border-right: 1px solid rgba(0, 0, 0, 0.05);
-`;
-
-const TabNavItem = styled.li`
-  padding: 0.35rem 0.3rem;
-  height: 48px;
-  display: block;
-  position: relative;
-`;
-
-const TabNavItemButton = styled.button<{ active: boolean }>`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  padding-top: 10px !important;
-  padding-bottom: 10px !important;
-  padding-left: 12px !important;
-  padding-right: 8px !important;
-  width: 100%;
-  position: relative;
-
-  color: ${(props) => (props.active ? `${props.theme.colors.secondary}` : props.theme.colors.text.primary)};
-  &:hover {
-    color: ${(props) => `${props.theme.colors.primary}`};
-  }
-  &:hover svg {
-    fill: ${(props) => props.theme.colors.primary};
-  }
-`;
-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)}
-`;
-
-const TabNavItemSpan = styled.span`
-  text-align: left;
-  padding-left: 9px;
-  font-size: 14px;
-`;
-
-const TabNavLine = styled.span<{ top: number }>`
-  left: auto;
-  right: 0;
-  width: 2px;
-  height: 48px;
-  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};
-  display: block;
-  position: absolute;
-  transition: all 0.2s ease;
-`;
-
-const TabContentWrapper = styled.div`
-  position: relative;
-  display: block;
-  overflow: hidden;
-  width: 100%;
-  margin-left: 1rem;
-`;
-
-const TabContent = styled.div`
-  position: relative;
-  width: 100%;
-  display: block;
-  padding: 0;
-  padding: 1.5rem;
-  background-color: #10163a;
-  border-radius: 0.5rem;
-`;
-
-const items = [{ name: 'Members' }];
-
 export const RoleCheckmark = styled(Checkmark)`
   padding-left: 4px;
 `;
@@ -263,7 +54,7 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
   position: relative;
   text-decoration: none;
 
-  ${(props) =>
+  ${props =>
     props.disabled
       ? css`
           user-select: none;
@@ -284,7 +75,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: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
 `;
 
 export const Separator = styled.div`
@@ -295,13 +86,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: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
   padding: 6px;
 `;
 
 export const DeleteDescription = styled.div`
   font-size: 14px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
 `;
 
 export const RemoveMemberButton = styled(Button)`
@@ -370,8 +161,8 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
         <MiniProfileActions>
           <MiniProfileActionWrapper>
             {permissions
-              .filter((p) => (user.role && user.role.code === 'owner') || p.code !== 'owner')
-              .map((perm) => (
+              .filter(p => (user.role && user.role.code === 'owner') || p.code !== 'owner')
+              .map(perm => (
                 <MiniProfileActionItem
                   disabled={user.role && perm.code !== user.role.code && !canChangeRole}
                   key={perm.code}
@@ -422,9 +213,9 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
                 Choose a new user to take over ownership of the users teams & projects.
               </DeleteDescription>
               <UserSelect
-                onChange={(v) => setDeleteUser(v)}
+                onChange={v => setDeleteUser(v)}
                 value={deleteUser}
-                options={users.map((u) => ({ label: u.fullName, value: u.id }))}
+                options={users.map(u => ({ label: u.fullName, value: u.id }))}
               />
             </>
           )}
@@ -449,7 +240,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
             Removing this user from the organzation will remove them from assigned tasks, projects, and teams.
           </DeleteDescription>
           <DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
-          <UserSelect onChange={NOOP} value={null} options={users.map((u) => ({ label: u.fullName, value: u.id }))} />
+          <UserSelect onChange={NOOP} value={null} options={users.map(u => ({ label: u.fullName, value: u.id }))} />
           <UserPassConfirmButton
             onClick={() => {
               // onDeleteUser();
@@ -502,6 +293,211 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
   );
 };
 
+const UserSelect = styled(Select)`
+  margin: 8px 0;
+  padding: 8px 0;
+`;
+
+const NewUserPassInput = styled(Input)`
+  margin: 8px 0;
+`;
+
+const InviteMemberButton = styled(Button)`
+  padding: 7px 12px;
+`;
+
+const UserPassBar = styled.div`
+  display: flex;
+  padding-top: 8px;
+`;
+
+const UserPassConfirmButton = styled(Button)`
+  width: 100%;
+  padding: 7px 12px;
+`;
+
+const UserPassButton = styled(Button)`
+  width: 50%;
+  padding: 7px 12px;
+  & ~ & {
+    margin-left: 6px;
+  }
+`;
+
+const MemberItemOptions = styled.div``;
+
+const MemberItemOption = styled(Button)`
+  padding: 7px 9px;
+  margin: 4px 0 4px 8px;
+  float: left;
+  min-width: 95px;
+`;
+
+const MemberList = styled.div`
+  border-top: 1px solid ${props => props.theme.colors.border};
+`;
+
+const MemberListItem = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  border-bottom: 1px solid ${props => props.theme.colors.border};
+  min-height: 40px;
+  padding: 12px 0 12px 40px;
+  position: relative;
+`;
+
+const MemberListItemDetails = styled.div`
+  float: left;
+  flex: 1 0 auto;
+  padding-left: 8px;
+`;
+
+const InviteIcon = styled(UserPlus)`
+  padding-right: 4px;
+`;
+
+const MemberProfile = styled(TaskAssignee)`
+  position: absolute;
+  top: 16px;
+  left: 0;
+  margin: 0;
+`;
+
+const MemberItemName = styled.p`
+  color: ${props => props.theme.colors.text.secondary};
+`;
+
+const MemberItemUsername = styled.p`
+  color: ${props => props.theme.colors.text.primary};
+`;
+
+const MemberListHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const ListTitle = styled.h3`
+  font-size: 18px;
+  color: ${props => props.theme.colors.text.secondary};
+  margin-bottom: 12px;
+`;
+const ListDesc = styled.span`
+  font-size: 16px;
+  color: ${props => props.theme.colors.text.primary};
+`;
+const FilterSearch = styled(Input)`
+  margin: 0;
+`;
+
+const ListActions = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+  margin-bottom: 18px;
+`;
+
+const MemberListWrapper = styled.div`
+  flex: 1 1;
+`;
+
+const Container = styled.div`
+  padding: 2.2rem;
+  display: flex;
+  width: 100%;
+  max-width: 1400px;
+  position: relative;
+  margin: 0 auto;
+`;
+
+const TabNav = styled.div`
+  float: left;
+  width: 220px;
+  height: 100%;
+  display: block;
+  position: relative;
+`;
+
+const TabNavContent = styled.ul`
+  display: block;
+  width: auto;
+  border-bottom: 0 !important;
+  border-right: 1px solid rgba(0, 0, 0, 0.05);
+`;
+
+const TabNavItem = styled.li`
+  padding: 0.35rem 0.3rem;
+  height: 48px;
+  display: block;
+  position: relative;
+`;
+
+const TabNavItemButton = styled.button<{ active: boolean }>`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
+  padding-left: 12px !important;
+  padding-right: 8px !important;
+  width: 100%;
+  position: relative;
+
+  color: ${props => (props.active ? `${props.theme.colors.secondary}` : props.theme.colors.text.primary)};
+  &:hover {
+    color: ${props => `${props.theme.colors.primary}`};
+  }
+  &:hover svg {
+    fill: ${props => props.theme.colors.primary};
+  }
+`;
+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)}
+`;
+
+const TabNavItemSpan = styled.span`
+  text-align: left;
+  padding-left: 9px;
+  font-size: 14px;
+`;
+
+const TabNavLine = styled.span<{ top: number }>`
+  left: auto;
+  right: 0;
+  width: 2px;
+  height: 48px;
+  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};
+  display: block;
+  position: absolute;
+  transition: all 0.2s ease;
+`;
+
+const TabContentWrapper = styled.div`
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  margin-left: 1rem;
+`;
+
+const TabContent = styled.div`
+  position: relative;
+  width: 100%;
+  display: block;
+  padding: 0;
+  padding: 1.5rem;
+  background-color: #10163a;
+  border-radius: 0.5rem;
+`;
+
+const items = [{ name: 'Members' }];
+
 type NavItemProps = {
   active: boolean;
   name: string;
@@ -595,7 +591,7 @@ const Admin: React.FC<AdminProps> = ({
                 <FilterSearch width="250px" variant="alternate" placeholder="Filter by name" />
                 {canInviteUser && (
                   <InviteMemberButton
-                    onClick={($target) => {
+                    onClick={$target => {
                       onAddUser($target);
                     }}
                   >
@@ -606,7 +602,7 @@ const Admin: React.FC<AdminProps> = ({
               </ListActions>
             </MemberListHeader>
             <MemberList>
-              {users.map((member) => {
+              {users.map(member => {
                 const projectTotal = member.owned.projects.length + member.member.projects.length;
                 return (
                   <MemberListItem>
@@ -619,7 +615,7 @@ const Admin: React.FC<AdminProps> = ({
                       <MemberItemOption variant="flat">{`On ${projectTotal} projects`}</MemberItemOption>
                       <MemberItemOption
                         variant="outline"
-                        onClick={($target) => {
+                        onClick={$target => {
                           showPopup(
                             $target,
                             <TeamRoleManagerPopup
@@ -630,7 +626,7 @@ const Admin: React.FC<AdminProps> = ({
                                 onUpdateUserPassword(user, password);
                               }}
                               canChangeRole={(member.role && member.role.code !== 'owner') ?? false}
-                              onChangeRole={(roleCode) => {
+                              onChangeRole={roleCode => {
                                 updateUserRole({ variables: { userID: member.id, roleCode } });
                               }}
                               onDeleteUser={onDeleteUser}
@@ -644,7 +640,7 @@ const Admin: React.FC<AdminProps> = ({
                   </MemberListItem>
                 );
               })}
-              {invitedUsers.map((member) => {
+              {invitedUsers.map(member => {
                 return (
                   <MemberListItem>
                     <MemberProfile
@@ -668,7 +664,7 @@ const Admin: React.FC<AdminProps> = ({
                     <MemberItemOptions>
                       <MemberItemOption
                         variant="outline"
-                        onClick={($target) => {
+                        onClick={$target => {
                           showPopup(
                             $target,
                             <TeamRoleManagerPopup

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

@@ -6,11 +6,11 @@ const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: ${(props) => props.justifyTextContent};
+  justify-content: ${props => props.justifyTextContent};
   transition: all 0.2s ease;
-  font-size: ${(props) => props.fontSize};
-  color: ${(props) => props.theme.colors.text.secondary};
-  ${(props) =>
+  font-size: ${props => props.fontSize};
+  color: ${props => props.theme.colors.text.secondary};
+  ${props =>
     props.hasIcon &&
     css`
       padding-left: 4px;
@@ -23,11 +23,11 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
   border: none;
   cursor: pointer;
   padding: 0.75rem 2rem;
-  border-radius: ${(props) => props.theme.borderRadius.alternate};
+  border-radius: ${props => props.theme.borderRadius.alternate};
   display: flex;
   align-items: center;
 
-  ${(props) =>
+  ${props =>
     props.disabled &&
     css`
       opacity: 0.5;
@@ -37,8 +37,8 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
 `;
 
 const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
-  background: ${(props) => props.theme.colors[props.color]};
-  ${(props) =>
+  background: ${props => props.theme.colors[props.color]};
+  ${props =>
     props.hoverVariant === 'boxShadow' &&
     css`
       &:hover {
@@ -48,9 +48,9 @@ const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
 `;
 
 const Outline = styled(Base)<{ invert: boolean }>`
-  border: 1px solid ${(props) => props.theme.colors[props.color]};
+  border: 1px solid ${props => props.theme.colors[props.color]};
   background: transparent;
-  ${(props) =>
+  ${props =>
     props.invert
       ? css`
           background: ${props.theme.colors[props.color]});
@@ -74,7 +74,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: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
   }
 `;
 
@@ -87,7 +87,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: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
 `;
 
 const LineDown = styled(Base)`
@@ -96,7 +96,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: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
 
   &:hover ${LineX} {
     width: 100%;
@@ -109,14 +109,17 @@ 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)}
+    ${props => mixin.rgba(props.theme.colors[props.color], 1)},
+    ${props => mixin.rgba(props.theme.colors[props.color], 0.5)}
   );
   text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
+  &:hover {
+    transform: translateY(-2px);
+  }
 `;
 
 const Relief = styled(Base)`
-  background: ${(props) => mixin.rgba(props.theme.colors[props.color], 1)};
+  background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
   -webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset;
   box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);
 

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

@@ -1,27 +1,18 @@
 import styled, { css, keyframes } from 'styled-components';
 import { mixin } from 'shared/utils/styles';
 import TextareaAutosize from 'react-autosize-textarea';
-import { CheckCircle, CheckSquareOutline, Clock, Bubble } from 'shared/icons';
+import { CheckCircle, CheckSquareOutline, Clock } from 'shared/icons';
 import TaskAssignee from 'shared/components/TaskAssignee';
 
 export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
-  box-shadow: 0 0 0 2px ${(props) => props.theme.colors.bg.secondary},
-    inset 0 0 0 1px ${(props) => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
-  z-index: ${(props) => props.zIndex};
+  box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.secondary},
+    inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
+  z-index: ${props => props.zIndex};
   position: relative;
 `;
 
-export const CommentsIcon = styled(Bubble)<{ color: 'success' | 'normal' }>`
-  ${(props) =>
-    props.color === 'success' &&
-    css`
-      fill: ${props.theme.colors.success};
-      stroke: ${props.theme.colors.success};
-    `}
-`;
-
 export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'normal' }>`
-  ${(props) =>
+  ${props =>
     props.color === 'success' &&
     css`
       fill: ${props.theme.colors.success};
@@ -30,7 +21,7 @@ export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'no
 `;
 
 export const ClockIcon = styled(Clock)<{ color: string }>`
-  fill: ${(props) => props.color};
+  fill: ${props => props.color};
 `;
 
 export const EditorTextarea = styled(TextareaAutosize)`
@@ -49,7 +40,7 @@ export const EditorTextarea = styled(TextareaAutosize)`
   padding: 0;
   font-size: 14px;
   line-height: 18px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
   &:focus {
     border: none;
     outline: none;
@@ -63,22 +54,6 @@ export const ListCardBadges = styled.div`
   margin-left: -2px;
 `;
 
-export const CommentsBadge = styled.div`
-  color: #5e6c84;
-  display: flex;
-  align-items: center;
-  margin: 0 6px 4px 0;
-  font-size: 12px;
-  max-width: 100%;
-  min-height: 20px;
-  overflow: hidden;
-  position: relative;
-  padding: 2px;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  vertical-align: top;
-`;
-
 export const ListCardBadge = styled.div`
   color: #5e6c84;
   display: flex;
@@ -101,7 +76,7 @@ export const DescriptionBadge = styled(ListCardBadge)`
 
 export const DueDateCardBadge = styled(ListCardBadge)<{ isPastDue: boolean }>`
   font-size: 12px;
-  ${(props) =>
+  ${props =>
     props.isPastDue &&
     css`
       padding-left: 4px;
@@ -116,7 +91,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: ${props.theme.colors.success};`}
 `;
 
 export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`
@@ -127,7 +102,7 @@ export const ListCardContainer = styled.div<{ isActive: boolean; editable: boole
   cursor: pointer !important;
   position: relative;
 
-  background-color: ${(props) =>
+  background-color: ${props =>
     props.isActive && !props.editable
       ? mixin.darken(props.theme.colors.bg.secondary, 0.1)
       : `${props.theme.colors.bg.secondary}`};
@@ -144,7 +119,7 @@ export const ListCardDetails = styled.div<{ complete: boolean }>`
   position: relative;
   z-index: 10;
 
-  ${(props) => props.complete && 'opacity: 0.6;'}
+  ${props => props.complete && 'opacity: 0.6;'}
 `;
 
 const labelVariantExpandAnimation = keyframes`
@@ -182,7 +157,7 @@ export const ListCardLabelsWrapper = styled.div`
 `;
 
 export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
-  ${(props) =>
+  ${props =>
     props.variant === 'small'
       ? css`
           height: 8px;
@@ -208,14 +183,14 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
   color: #fff;
   display: flex;
   position: relative;
-  background-color: ${(props) => props.color};
+  background-color: ${props => props.color};
 `;
 
 export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>`
   &:hover {
     opacity: 0.8;
   }
-  ${(props) =>
+  ${props =>
     props.toggleLabels &&
     props.toggleDirection === 'expand' &&
     css`
@@ -226,7 +201,7 @@ export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirectio
         animation: ${labelTextVariantExpandAnimation} 0.45s ease-out;
       }
     `}
-  ${(props) =>
+  ${props =>
     props.toggleLabels &&
     props.toggleDirection === 'shrink' &&
     css`
@@ -250,7 +225,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(props.theme.colors.bg.secondary, 0.25)};
   }
 `;
 
@@ -259,7 +234,7 @@ export const CardTitle = styled.div`
   margin: 0 0 4px;
   overflow: hidden;
   text-decoration: none;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
   display: block;
   align-items: center;
 `;
@@ -276,7 +251,7 @@ export const CardMembers = styled.div`
 `;
 
 export const CompleteIcon = styled(CheckCircle)`
-  fill: ${(props) => props.theme.colors.success};
+  fill: ${props => props.theme.colors.success};
   margin-right: 4px;
   flex-shrink: 0;
   margin-bottom: -2px;

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

@@ -23,8 +23,6 @@ import {
   CardTitle,
   CardMembers,
   CardTitleText,
-  CommentsIcon,
-  CommentsBadge,
 } from './Styles';
 
 type DueDate = {
@@ -49,7 +47,6 @@ type Props = {
   dueDate?: DueDate;
   checklists?: Checklist | null;
   labels?: Array<ProjectLabel>;
-  comments?: { unread: boolean; total: number } | null;
   watched?: boolean;
   wrapperProps?: any;
   members?: Array<TaskUser> | null;
@@ -75,7 +72,6 @@ const Card = React.forwardRef(
       taskGroupID,
       complete,
       toggleLabels = false,
-      comments,
       toggleDirection = 'shrink',
       setToggleLabels,
       onClick,
@@ -142,7 +138,7 @@ const Card = React.forwardRef(
         onMouseEnter={() => setActive(true)}
         onMouseLeave={() => setActive(false)}
         ref={$cardRef}
-        onClick={(e) => {
+        onClick={e => {
           if (onClick) {
             onClick(e);
           }
@@ -155,7 +151,7 @@ const Card = React.forwardRef(
         <ListCardInnerContainer ref={$innerCardRef}>
           {!isPublic && isActive && !editable && (
             <ListCardOperation
-              onClick={(e) => {
+              onClick={e => {
                 e.stopPropagation();
                 if (onContextMenu) {
                   onContextMenu($innerCardRef, taskID, taskGroupID);
@@ -171,7 +167,7 @@ const Card = React.forwardRef(
                 <ListCardLabels
                   toggleLabels={toggleLabels}
                   toggleDirection={toggleDirection}
-                  onClick={(e) => {
+                  onClick={e => {
                     e.stopPropagation();
                     if (onCardLabelClick) {
                       onCardLabelClick();
@@ -181,7 +177,7 @@ const Card = React.forwardRef(
                   {labels
                     .slice()
                     .sort((a, b) => a.labelColor.position - b.labelColor.position)
-                    .map((label) => (
+                    .map(label => (
                       <ListCardLabel
                         onAnimationEnd={() => {
                           if (setToggleLabels) {
@@ -202,13 +198,13 @@ const Card = React.forwardRef(
               <EditorContent>
                 {complete && <CompleteIcon width={16} height={16} />}
                 <EditorTextarea
-                  onChange={(e) => {
+                  onChange={e => {
                     setCardTitle(e.currentTarget.value);
                     if (onCardTitleChange) {
                       onCardTitleChange(e.currentTarget.value);
                     }
                   }}
-                  onClick={(e) => {
+                  onClick={e => {
                     e.stopPropagation();
                   }}
                   onKeyDown={handleKeyDown}
@@ -225,7 +221,7 @@ const Card = React.forwardRef(
             <ListCardBadges>
               {watched && (
                 <ListCardBadge>
-                  <Eye width={12} height={12} />
+                  <Eye width={8} height={8} />
                 </ListCardBadge>
               )}
               {dueDate && (
@@ -239,12 +235,6 @@ const Card = React.forwardRef(
                   <List width={8} height={8} />
                 </DescriptionBadge>
               )}
-              {comments && (
-                <CommentsBadge>
-                  <CommentsIcon color={comments.unread ? 'success' : 'normal'} width={8} height={8} />
-                  <ListCardBadgeText color={comments.unread ? 'success' : 'normal'}>{comments.total}</ListCardBadgeText>
-                </CommentsBadge>
-              )}
               {checklists && (
                 <ListCardBadge>
                   <ChecklistIcon
@@ -266,7 +256,7 @@ const Card = React.forwardRef(
                     size={28}
                     zIndex={members.length - idx}
                     member={member}
-                    onMemberProfile={($target) => {
+                    onMemberProfile={$target => {
                       if (onCardMemberClick) {
                         onCardMemberClick($target, taskID, member.id);
                       }

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

@@ -21,7 +21,14 @@ import {
   SubTitle,
 } from './Styles';
 
-const Confirm = ({ hasFailed, hasConfirmToken }: ConfirmProps) => {
+const Confirm = ({ onConfirmUser, hasConfirmToken }: ConfirmProps) => {
+  const [hasFailed, setFailed] = useState(false);
+  const setHasFailed = () => {
+    setFailed(true);
+  };
+  useEffect(() => {
+    onConfirmUser(setHasFailed);
+  });
   return (
     <Wrapper>
       <Column>

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

@@ -1,8 +1,9 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import { mixin } from 'shared/utils/styles';
+import Input from 'shared/components/Input';
 import ControlledInput from 'shared/components/ControlledInput';
-import { Bell, Clock } from 'shared/icons';
+import { Clock } from 'shared/icons';
 
 export const Wrapper = styled.div`
 display: flex
@@ -21,27 +22,27 @@ display: flex
   & .react-datepicker__close-icon::after {
     background: none;
     font-size: 16px;
-    color: ${(props) => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.primary};
   }
 
   & .react-datepicker-time__header {
-    color: ${(props) => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.primary};
   }
   & .react-datepicker__time-list-item {
-    color: ${(props) => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.primary};
   }
   & .react-datepicker__time-container .react-datepicker__time
   .react-datepicker__time-box ul.react-datepicker__time-list
   li.react-datepicker__time-list-item:hover {
-    color: ${(props) => props.theme.colors.text.secondary};
-    background: ${(props) => props.theme.colors.bg.secondary};
+    color: ${props => props.theme.colors.text.secondary};
+    background: ${props => props.theme.colors.bg.secondary};
   }
   & .react-datepicker__time-container .react-datepicker__time {
-    background: ${(props) => props.theme.colors.bg.primary};
+    background: ${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: ${props => props.theme.colors.bg.primary};
+    border: 1px solid ${props => props.theme.colors.border};
   }
 
   & .react-datepicker * {
@@ -81,12 +82,12 @@ display: flex
   }
   & .react-datepicker__day--selected {
     border-radius: 50%;
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
     color: #fff;
   }
   & .react-datepicker__day--selected:hover {
     border-radius: 50%;
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
     color: #fff;
   }
   & .react-datepicker__header {
@@ -94,12 +95,12 @@ display: flex
     border: none;
   }
   & .react-datepicker__header--time {
-    border-bottom: 1px solid ${(props) => props.theme.colors.border};
+    border-bottom: 1px solid ${props => props.theme.colors.border};
   }
 
   & .react-datepicker__input-container input {
   border: 1px solid rgba(0, 0, 0, 0.2);
-  border-color: ${(props) => props.theme.colors.alternate};
+  border-color: ${props => props.theme.colors.alternate};
   background: #262c49;
   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
 padding: 0.7rem;
@@ -113,7 +114,7 @@ padding: 0.7rem;
   &:focus {
     box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
     border: 1px solid rgba(115, 103, 240);
-    background: ${(props) => props.theme.colors.bg.primary};
+    background: ${props => props.theme.colors.bg.primary};
   }
 `;
 
@@ -141,9 +142,9 @@ export const AddDateRange = styled.div`
   width: 100%;
   font-size: 12px;
   line-height: 16px;
-  color: ${(props) => mixin.rgba(props.theme.colors.primary, 0.8)};
+  color: ${props => mixin.rgba(props.theme.colors.primary, 0.8)};
   &:hover {
-    color: ${(props) => mixin.rgba(props.theme.colors.primary, 1)};
+    color: ${props => mixin.rgba(props.theme.colors.primary, 1)};
     text-decoration: underline;
   }
 `;
@@ -200,62 +201,18 @@ export const ActionsWrapper = styled.div`
   align-items: center;
   & .react-datepicker-wrapper {
     margin-left: auto;
-    width: 86px;
+    width: 82px;
   }
   & .react-datepicker__input-container input {
     padding-bottom: 4px;
     padding-top: 4px;
     width: 100%;
   }
-
-  & .react-period-select__indicators {
-    display: none;
-  }
-  & .react-period {
-    width: 100%;
-    max-width: 86px;
-  }
-
-  & .react-period-select__single-value {
-    color: #c2c6dc;
-    margin-left: 0;
-    margin-right: 0;
-  }
-  & .react-period-select__value-container {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  & .react-period-select__control {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    min-height: 30px;
-    border-color: rgb(65, 69, 97);
-    background: #262c49;
-    box-shadow: 0 0 0 0 rgb(0 0 0 / 15%);
-    color: #c2c6dc;
-    padding-right: 12px;
-    padding-left: 12px;
-    padding-bottom: 4px;
-    padding-top: 4px;
-    width: 100%;
-    position: relative;
-    border-radius: 5px;
-    transition: all 0.3s ease;
-    font-size: 13px;
-    line-height: 20px;
-    padding: 0 12px;
-  }
 `;
 
 export const ActionClock = styled(Clock)`
   align-self: center;
-  fill: ${(props) => props.theme.colors.primary};
-  margin: 0 8px;
-  flex: 0 0 auto;
-`;
-
-export const ActionBell = styled(Bell)`
-  align-self: center;
-  fill: ${(props) => props.theme.colors.primary};
+  fill: ${props => props.theme.colors.primary};
   margin: 0 8px;
   flex: 0 0 auto;
 `;
@@ -265,7 +222,7 @@ export const ActionLabel = styled.div`
   line-height: 14px;
 `;
 
-export const ActionIcon = styled.div<{ disabled?: boolean }>`
+export const ActionIcon = styled.div`
   height: 36px;
   min-height: 36px;
   min-width: 36px;
@@ -275,25 +232,17 @@ export const ActionIcon = styled.div<{ disabled?: boolean }>`
   cursor: pointer;
   margin-right: 8px;
   svg {
-    fill: ${(props) => props.theme.colors.text.primary};
+    fill: ${props => props.theme.colors.text.primary};
     transition-duration: 0.2s;
     transition-property: background, border, box-shadow, fill;
   }
   &:hover svg {
-    fill: ${(props) => props.theme.colors.text.secondary};
+    fill: ${props => props.theme.colors.text.secondary};
   }
 
-  ${(props) =>
-    props.disabled &&
-    css`
-      opacity: 0.8;
-      cursor: not-allowed;
-    `}
-
   align-items: center;
   display: inline-flex;
   justify-content: center;
-  position: relative;
 `;
 
 export const ClearButton = styled.div`
@@ -311,38 +260,8 @@ export const ClearButton = styled.div`
   justify-content: center;
   transition-duration: 0.2s;
   transition-property: background, border, box-shadow, color, fill;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
   &:hover {
-    color: ${(props) => props.theme.colors.text.secondary};
+    color: ${props => props.theme.colors.text.secondary};
   }
 `;
-
-export const ControlWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin-top: 8px;
-`;
-
-export const RightWrapper = styled.div`
-  flex: 1 1 50%;
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-`;
-
-export const LeftWrapper = styled.div`
-  flex: 1 1 50%;
-  display: flex;
-  align-items: center;
-`;
-
-export const SaveButton = styled(Button)`
-  padding: 6px 12px;
-  justify-content: center;
-  margin-right: 4px;
-`;
-
-export const RemoveButton = styled.div`
-  width: 100%;
-  justify-content: center;
-`;

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

@@ -3,21 +3,14 @@ import dayjs from 'dayjs';
 import styled from 'styled-components';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
-import { colourStyles } from 'shared/components/Select';
-import produce from 'immer';
-import Select from 'react-select';
 import 'react-datepicker/dist/react-datepicker.css';
 import { getYear, getMonth } from 'date-fns';
 import { useForm, Controller } from 'react-hook-form';
 import NOOP from 'shared/utils/noop';
-import { Bell, Clock, Cross, Plus, Trash } from 'shared/icons';
 
 import {
   Wrapper,
   RemoveDueDate,
-  SaveButton,
-  RightWrapper,
-  LeftWrapper,
   DueDateInput,
   DueDatePickerWrapper,
   ConfirmAddDueDate,
@@ -29,19 +22,13 @@ import {
   ActionsSeparator,
   ActionClock,
   ActionLabel,
-  ControlWrapper,
-  RemoveButton,
-  ActionBell,
 } from './Styles';
+import { Clock, Cross } from 'shared/icons';
+import Select from 'react-select/src/Select';
 
 type DueDateManagerProps = {
   task: Task;
-  onDueDateChange: (
-    task: Task,
-    newDueDate: Date,
-    hasTime: boolean,
-    notifications: { current: Array<NotificationInternal>; removed: Array<string> },
-  ) => void;
+  onDueDateChange: (task: Task, newDueDate: Date, hasTime: boolean) => void;
   onRemoveDueDate: (task: Task) => void;
   onCancel: () => void;
 };
@@ -54,39 +41,6 @@ const FormField = styled.div`
   width: 50%;
   display: inline-block;
 `;
-
-const NotificationCount = styled.input``;
-
-const ActionPlus = styled(Plus)`
-  position: absolute;
-  fill: ${(props) => props.theme.colors.bg.primary} !important;
-  stroke: ${(props) => props.theme.colors.bg.primary};
-`;
-
-const ActionInput = styled.input`
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  margin-left: auto;
-  margin-right: 4px;
-  border-color: rgb(65, 69, 97);
-  background: #262c49;
-  box-shadow: 0 0 0 0 rgb(0 0 0 / 15%);
-  color: #c2c6dc;
-  position: relative;
-  border-radius: 5px;
-  transition: all 0.3s ease;
-  font-size: 13px;
-  line-height: 20px;
-  padding: 0 12px;
-  padding-bottom: 4px;
-  padding-top: 4px;
-  width: 100%;
-  max-width: 48px;
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-`;
 const HeaderSelectLabel = styled.div`
   display: inline-block;
   position: relative;
@@ -177,69 +131,8 @@ const HeaderActions = styled.div`
   }
 `;
 
-const notificationPeriodOptions = [
-  { value: 'minute', label: 'Minutes' },
-  { value: 'hour', label: 'Hours' },
-  { value: 'day', label: 'Days' },
-  { value: 'week', label: 'Weeks' },
-];
-
-type NotificationInternal = {
-  internalId: string;
-  externalId: string | null;
-  period: number;
-  duration: { value: string; label: string };
-};
-
-type NotificationEntryProps = {
-  notification: NotificationInternal;
-  onChange: (period: number, duration: { value: string; label: string }) => void;
-  onRemove: () => void;
-};
-
-const NotificationEntry: React.FC<NotificationEntryProps> = ({ notification, onChange, onRemove }) => {
-  return (
-    <>
-      <ActionBell width={16} height={16} />
-      <ActionLabel>Notification</ActionLabel>
-      <ActionInput
-        value={notification.period}
-        onChange={(e) => {
-          onChange(parseInt(e.currentTarget.value, 10), notification.duration);
-        }}
-        onKeyPress={(e) => {
-          const isNumber = /^[0-9]$/i.test(e.key);
-          if (!isNumber && e.key !== 'Backspace') {
-            e.preventDefault();
-          }
-        }}
-        dir="ltr"
-        autoComplete="off"
-        min="0"
-        type="number"
-      />
-      <Select
-        menuPlacement="top"
-        className="react-period"
-        classNamePrefix="react-period-select"
-        styles={colourStyles}
-        isSearchable={false}
-        defaultValue={notification.duration}
-        options={notificationPeriodOptions}
-        onChange={(e) => {
-          if (e !== null) {
-            onChange(notification.period, e);
-          }
-        }}
-      />
-      <ActionIcon onClick={() => onRemove()}>
-        <Cross width={16} height={16} />
-      </ActionIcon>
-    </>
-  );
-};
 const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
-  const currentDueDate = task.dueDate.at ? dayjs(task.dueDate.at).toDate() : null;
+  const currentDueDate = task.dueDate ? dayjs(task.dueDate).toDate() : null;
   const {
     register,
     handleSubmit,
@@ -252,7 +145,28 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
   const [startDate, setStartDate] = useState<Date | null>(currentDueDate);
   const [endDate, setEndDate] = useState<Date | null>(currentDueDate);
   const [hasTime, enableTime] = useState(task.hasTime ?? false);
+  const firstRun = useRef<boolean>(true);
 
+  const debouncedFunctionRef = useRef((newDate: Date | null, nowHasTime: boolean) => {
+    if (!firstRun.current) {
+      if (newDate) {
+        onDueDateChange(task, newDate, nowHasTime);
+      } else {
+        onRemoveDueDate(task);
+        enableTime(false);
+      }
+    } else {
+      firstRun.current = false;
+    }
+  });
+  const debouncedChange = useCallback(
+    _.debounce((newDate, nowHasTime) => debouncedFunctionRef.current(newDate, nowHasTime), 500),
+    [],
+  );
+
+  useEffect(() => {
+    debouncedChange(startDate, hasTime);
+  }, [startDate, hasTime]);
   const years = _.range(2010, getYear(new Date()) + 10, 1);
   const months = [
     'January',
@@ -269,41 +183,48 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
     'December',
   ];
 
-  const [isRange, setIsRange] = useState(false);
-  const [notDuration, setNotDuration] = useState(10);
-  const [removedNotifications, setRemovedNotifications] = useState<Array<string>>([]);
-  const [notifications, setNotifications] = useState<Array<NotificationInternal>>(
-    task.dueDate.notifications
-      ? task.dueDate.notifications.map((c, idx) => {
-          const duration =
-            notificationPeriodOptions.find((o) => o.value === c.duration.toLowerCase()) ?? notificationPeriodOptions[0];
-          return {
-            internalId: `n${idx}`,
-            externalId: c.id,
-            period: c.period,
-            duration,
+  const onChange = (dates: any) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
   };
-        })
-      : [],
+  const [isRange, setIsRange] = useState(false);
+
+  const CustomTimeInput = forwardRef(({ value, onClick, onChange, onBlur, onFocus }: any, $ref: any) => {
+    return (
+      <DueDateInput
+        id="endTime"
+        value={value}
+        name="endTime"
+        onChange={onChange}
+        width="100%"
+        variant="alternate"
+        label="Time"
+        onClick={onClick}
+      />
     );
+  });
+
   return (
     <Wrapper>
       <DateRangeInputs>
         <DatePicker
           selected={startDate}
           onChange={(date) => {
-            if (!Array.isArray(date) && date !== null) {
+            if (!Array.isArray(date)) {
               setStartDate(date);
             }
           }}
           popperClassName="picker-hidden"
           dateFormat="yyyy-MM-dd"
           disabledKeyboardNavigation
+          isClearable
           placeholderText="Select due date"
         />
         {isRange ? (
           <DatePicker
             selected={startDate}
+            isClearable
             onChange={(date) => {
               if (!Array.isArray(date)) {
                 setStartDate(date);
@@ -393,75 +314,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
           </ActionIcon>
         </ActionsWrapper>
       )}
-      {notifications.map((n, idx) => (
-        <ActionsWrapper key={n.internalId}>
-          <NotificationEntry
-            notification={n}
-            onChange={(period, duration) => {
-              setNotifications((prev) =>
-                produce(prev, (draft) => {
-                  draft[idx].duration = duration;
-                  draft[idx].period = period;
-                }),
-              );
-            }}
-            onRemove={() => {
-              setNotifications((prev) =>
-                produce(prev, (draft) => {
-                  draft.splice(idx, 1);
-                  if (n.externalId !== null) {
-                    setRemovedNotifications((prev) => {
-                      if (n.externalId !== null) {
-                        return [...prev, n.externalId];
-                      }
-                      return prev;
-                    });
-                  }
-                }),
-              );
-            }}
-          />
-        </ActionsWrapper>
-      ))}
-      <ControlWrapper>
-        <LeftWrapper>
-          <SaveButton
-            onClick={() => {
-              if (startDate && notifications.findIndex((n) => Number.isNaN(n.period)) === -1) {
-                onDueDateChange(task, startDate, hasTime, { current: notifications, removed: removedNotifications });
-              }
-            }}
-          >
-            Save
-          </SaveButton>
-          {currentDueDate !== null && (
-            <ActionIcon
-              onClick={() => {
-                onRemoveDueDate(task);
-              }}
-            >
-              <Trash width={16} height={16} />
-            </ActionIcon>
-          )}
-        </LeftWrapper>
-        <RightWrapper>
-          <ActionIcon
-            disabled={notifications.length === 3}
-            onClick={() => {
-              setNotifications((prev) => [
-                ...prev,
-                {
-                  externalId: null,
-                  internalId: `n${prev.length + 1}`,
-                  duration: notificationPeriodOptions[0],
-                  period: 10,
-                },
-              ]);
-            }}
-          >
-            <Bell width={16} height={16} />
-            <ActionPlus width={8} height={8} />
-          </ActionIcon>
+      <ActionsWrapper>
         {!hasTime && (
           <ActionIcon
             onClick={() => {
@@ -476,8 +329,8 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
             <Clock width={16} height={16} />
           </ActionIcon>
         )}
-        </RightWrapper>
-      </ControlWrapper>
+        <ClearButton onClick={() => setStartDate(null)}>{hasTime ? 'Clear all' : 'Clear'}</ClearButton>
+      </ActionsWrapper>
     </Wrapper>
   );
 };

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

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

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

@@ -100,7 +100,7 @@ const List = React.forwardRef(
             />
             {!isPublic && (
               <ListExtraMenuButtonWrapper ref={$extraActionsRef} onClick={handleExtraMenuOpen}>
-                <Ellipsis vertical={false} size={16} color="#c2c6dc" />
+                <Ellipsis size={16} color="#c2c6dc" />
               </ListExtraMenuButtonWrapper>
             )}
           </Header>

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

@@ -4,7 +4,6 @@ import List, { ListCards } from 'shared/components/List';
 import Card from 'shared/components/Card';
 import CardComposer from 'shared/components/CardComposer';
 import AddList from 'shared/components/AddList';
-import log from 'loglevel';
 import {
   isPositionChanged,
   getSortedDraggables,
@@ -112,16 +111,24 @@ function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
         const TODAY = REFERENCE.clone().startOf('day');
         return completedAt.isSame(TODAY, 'd');
       case TaskSince.YESTERDAY:
-        const YESTERDAY = REFERENCE.clone().subtract(1, 'day').startOf('day');
+        const YESTERDAY = REFERENCE.clone()
+          .subtract(1, 'day')
+          .startOf('day');
         return completedAt.isSameOrAfter(YESTERDAY, 'd');
       case TaskSince.ONE_WEEK:
-        const ONE_WEEK = REFERENCE.clone().subtract(7, 'day').startOf('day');
+        const ONE_WEEK = REFERENCE.clone()
+          .subtract(7, 'day')
+          .startOf('day');
         return completedAt.isSameOrAfter(ONE_WEEK, 'd');
       case TaskSince.TWO_WEEKS:
-        const TWO_WEEKS = REFERENCE.clone().subtract(14, 'day').startOf('day');
+        const TWO_WEEKS = REFERENCE.clone()
+          .subtract(14, 'day')
+          .startOf('day');
         return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
       case TaskSince.THREE_WEEKS:
-        const THREE_WEEKS = REFERENCE.clone().subtract(21, 'day').startOf('day');
+        const THREE_WEEKS = REFERENCE.clone()
+          .subtract(21, 'day')
+          .startOf('day');
         return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
       default:
         return true;
@@ -196,14 +203,14 @@ const SimpleLists: React.FC<SimpleProps> = ({
     let beforeDropDraggables: Array<DraggableElement> | null = null;
 
     if (isList) {
-      const droppedGroup = taskGroups.find((taskGroup) => taskGroup.id === draggableId);
+      const droppedGroup = taskGroups.find(taskGroup => taskGroup.id === draggableId);
       if (droppedGroup) {
         droppedDraggable = {
           id: draggableId,
           position: droppedGroup.position,
         };
         beforeDropDraggables = getSortedDraggables(
-          taskGroups.map((taskGroup) => {
+          taskGroups.map(taskGroup => {
             return { id: taskGroup.id, position: taskGroup.position };
           }),
         );
@@ -227,13 +234,13 @@ const SimpleLists: React.FC<SimpleProps> = ({
       }
     } else {
       const curTaskGroup = taskGroups.findIndex(
-        (taskGroup) => taskGroup.tasks.findIndex((task) => task.id === draggableId) !== -1,
+        taskGroup => taskGroup.tasks.findIndex(task => task.id === draggableId) !== -1,
       );
       let targetTaskGroup = curTaskGroup;
       if (!isSameList) {
-        targetTaskGroup = taskGroups.findIndex((taskGroup) => taskGroup.id === destination.droppableId);
+        targetTaskGroup = taskGroups.findIndex(taskGroup => taskGroup.id === destination.droppableId);
       }
-      const droppedTask = taskGroups[curTaskGroup].tasks.find((task) => task.id === draggableId);
+      const droppedTask = taskGroups[curTaskGroup].tasks.find(task => task.id === draggableId);
 
       if (droppedTask) {
         droppedDraggable = {
@@ -241,7 +248,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
           position: droppedTask.position,
         };
         beforeDropDraggables = getSortedDraggables(
-          taskGroups[targetTaskGroup].tasks.map((task) => {
+          taskGroups[targetTaskGroup].tasks.map(task => {
             return { id: task.id, position: task.position };
           }),
         );
@@ -263,9 +270,6 @@ const SimpleLists: React.FC<SimpleProps> = ({
             id: destination.droppableId,
           },
         };
-        log.debug(
-          `action=move taskId=${droppedTask.id} source=${source.droppableId} dest=${destination.droppableId} oldPos=${droppedTask.position} newPos=${newPosition}`,
-        );
         onTaskDrop(newTask, droppedTask.taskGroup.id);
       }
     }
@@ -282,7 +286,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
       <BoardWrapper>
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable direction="horizontal" type="column" droppableId="root">
-            {(provided) => (
+            {provided => (
               <Container {...provided.droppableProps} ref={provided.innerRef}>
                 {taskGroups
                   .slice()
@@ -290,14 +294,14 @@ const SimpleLists: React.FC<SimpleProps> = ({
                   .map((taskGroup: TaskGroup, index: number) => {
                     return (
                       <Draggable draggableId={taskGroup.id} key={taskGroup.id} index={index}>
-                        {(columnDragProvided) => (
+                        {columnDragProvided => (
                           <Droppable type="tasks" droppableId={taskGroup.id}>
                             {(columnDropProvided, snapshot) => (
                               <List
                                 name={taskGroup.name}
-                                onOpenComposer={(id) => setCurrentComposer(id)}
+                                onOpenComposer={id => setCurrentComposer(id)}
                                 isComposerOpen={currentComposer === taskGroup.id}
-                                onSaveName={(name) => onChangeTaskGroupName(taskGroup.id, name)}
+                                onSaveName={name => onChangeTaskGroupName(taskGroup.id, name)}
                                 isPublic={isPublic}
                                 ref={columnDragProvided.innerRef}
                                 wrapperProps={columnDragProvided.draggableProps}
@@ -310,8 +314,8 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                 <ListCards ref={columnDropProvided.innerRef} {...columnDropProvided.droppableProps}>
                                   {taskGroup.tasks
                                     .slice()
-                                    .filter((t) => shouldStatusFilter(t, taskStatusFilter))
-                                    .filter((t) => shouldMetaFilter(t, taskMetaFilters))
+                                    .filter(t => shouldStatusFilter(t, taskStatusFilter))
+                                    .filter(t => shouldMetaFilter(t, taskMetaFilters))
                                     .sort((a: any, b: any) => a.position - b.position)
                                     .sort((a: any, b: any) => sortTasks(a, b, taskSorting))
                                     .map((task: Task, taskIndex: any) => {
@@ -322,14 +326,13 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                           index={taskIndex}
                                           isDragDisabled={taskSorting.type !== TaskSortingType.NONE}
                                         >
-                                          {(taskProvided) => {
+                                          {taskProvided => {
                                             return (
                                               <Card
                                                 toggleDirection={toggleDirection}
                                                 toggleLabels={toggleLabels}
                                                 isPublic={isPublic}
                                                 labelVariant={cardLabelVariant}
-                                                watched={task.watched}
                                                 wrapperProps={{
                                                   ...taskProvided.draggableProps,
                                                   ...taskProvided.dragHandleProps,
@@ -349,12 +352,12 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                                 complete={task.complete ?? false}
                                                 taskGroupID={taskGroup.id}
                                                 description=""
-                                                labels={task.labels.map((label) => label.projectLabel)}
+                                                labels={task.labels.map(label => label.projectLabel)}
                                                 dueDate={
-                                                  task.dueDate.at
+                                                  task.dueDate
                                                     ? {
                                                         isPastDue: false,
-                                                        formattedDate: dayjs(task.dueDate.at).format('MMM D, YYYY'),
+                                                        formattedDate: dayjs(task.dueDate).format('MMM D, YYYY'),
                                                       }
                                                     : undefined
                                                 }
@@ -364,7 +367,6 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                                   onTaskClick(task);
                                                 }}
                                                 checklists={task.badges && task.badges.checklist}
-                                                comments={task.badges && task.badges.comments}
                                                 onCardMemberClick={onCardMemberClick}
                                                 onContextMenu={onQuickEditorOpen}
                                               />
@@ -379,7 +381,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                       onClose={() => {
                                         setCurrentComposer('');
                                       }}
-                                      onCreateCard={(name) => {
+                                      onCreateCard={name => {
                                         onCreateTask(taskGroup.id, name);
                                       }}
                                       isOpen
@@ -400,7 +402,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
         </DragDropContext>
         {!isPublic && (
           <AddList
-            onSave={(listName) => {
+            onSave={listName => {
               onCreateTaskGroup(listName);
             }}
           />

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

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

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

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import { mixin } from 'shared/utils/styles';
-import AccessAccount from 'shared/undraw/AccessAccount';
 
 export const Wrapper = styled.div`
   background: #eff2f7;
@@ -16,12 +15,6 @@ export const Column = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  @media (max-width: 600px) {
-    svg {
-      display: none;
-    }
-    position: absolute;
-  }
 `;
 
 export const LoginFormWrapper = styled.div`
@@ -32,47 +25,18 @@ export const LoginFormWrapper = styled.div`
 export const LoginFormContainer = styled.div`
   min-height: 505px;
   padding: 2rem;
-  @media (max-width: 600px) {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border: solid black 1px;
-    width: 600px;
-    height: 1100px;
-    box-shadow: 20px 20px 50px black;
-  }
-  @media (min-height: 641px) and (max-height: 653px) {
-    margin-top: 25%;
-  }
-  @media (min-height: 654px) and (max-height: 823px) and (max-width: 500px) {
-    margin-top: -20%;
-  }
-  @media (min-height: 480px) and (max-height: 639px) {
-    margin-top: 20%;
-  }
 `;
 
 export const Title = styled.h1`
   color: #ebeefd;
   font-size: 18px;
   margin-bottom: 14px;
-  @media (max-width: 600px) {
-    font-size: 38px;
-    margin-top: 50px;
-    text-align: center;
-  }
 `;
 
 export const SubTitle = styled.h2`
   color: #c2c6dc;
   font-size: 14px;
   margin-bottom: 14px;
-  @media (max-width: 600px) {
-    margin-top: 30px;
-    font-size: 24.5px;
-    margin-bottom: 90px;
-    text-align: center;
-  }
 `;
 export const Form = styled.form`
   display: flex;
@@ -84,10 +48,6 @@ export const FormLabel = styled.label`
   font-size: 12px;
   position: relative;
   margin-top: 14px;
-  @media (max-width: 600px) {
-    font-size: 35px;
-    font-weight: bold;
-  }
 `;
 
 export const FormTextInput = styled.input`
@@ -99,92 +59,28 @@ export const FormTextInput = styled.input`
   font-size: 1rem;
   color: #c2c6dc;
   border-radius: 5px;
-
-  @media (max-width: 600px) {
-    border: 5px solid rgba(0, 0, 0, 0.2);
-    border-radius: 5%;
-    font-size: 30px;
-    background-color: #353D64;
-    color: black;
-    padding: 0.7rem 1rem 1rem 3rem;
-    text-align: center;
-    &::placeholder {
-      visibility: hidden;
-    }
-
-    &:not(:placeholder-shown) {
-      background-color: white;
-    }
-  }
 `;
 
 export const FormIcon = styled.div`
   top: 30px;
   left: 16px;
   position: absolute;
-
-  @media (max-width: 600px) {
-    svg {
-      width: 40px;
-      height: 40px;
-      display: inline;
-      position: absolute;
-      top: 30px;
-      left: -5px;
-    }
-  }
 `;
 
 export const FormError = styled.span`
   font-size: 0.875rem;
-  color: ${(props) => props.theme.colors.danger};
-  @media (max-width: 600px) {
-    font-size: 1.8rem;
-  }
+  color: ${props => props.theme.colors.danger};
 `;
 
-export const LoginButton = styled(Button)`
-  @media (max-width: 600px) {
-    span {
-      font-size: 40px;
-      text-align: center;
-      width: 100%;
-    }
-    align-self: center;
-    position: absolute; 
-    right: 0px;
-    margin-top: 40%;
-    width: 100%;
-    &:hover {
-      box-shadow: 5px 5px 20px white;
-    }
-  }
-`;
+export const LoginButton = styled(Button)``;
 
 export const ActionButtons = styled.div`
   margin-top: 17.5px;
   display: flex;
   justify-content: space-between;
-  @media (max-width: 600px) {
-    width: 150px;
-    align-content: center;
-    font-size: 50px;
-  }
 `;
 
-export const RegisterButton = styled(Button)`
-  @media (max-width: 600px) {
-    span {
-      font-size: 40px;
-      text-align: center;
-      width: 100%;
-    }
-    width: 100%;
-    position: absolute;
-    left: 0px;
-    margin-top: 29%;
-  }
-`;
+export const RegisterButton = styled(Button)``;
 
 export const LogoTitle = styled.div`
   font-size: 24px;
@@ -192,9 +88,6 @@ export const LogoTitle = styled.div`
   margin-left: 12px;
   transition: visibility, opacity, transform 0.25s ease;
   color: #7367f0;
-  @media (max-width: 600px) {
-    font-size: 60px;
-  }
 `;
 
 export const LogoWrapper = styled.div`
@@ -207,16 +100,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)};
-  @media (max-width: 600px) {
-    svg {
-      display: inline;
-      width: 80px;
-      height: 80px;
-    }
-  }
+  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
 `;
-
-
-
-

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

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import AccessAccount from 'shared/undraw/AccessAccount';
 import { User, Lock, Taskcafe } from 'shared/icons';
 import { useForm } from 'react-hook-form';
-import { useHistory } from 'react-router';
+
 import LoadingSpinner from 'shared/components/LoadingSpinner';
 import {
   Form,
@@ -25,7 +25,6 @@ import {
 
 const Login = ({ onSubmit }: LoginProps) => {
   const [isComplete, setComplete] = useState(true);
-  const [showRegistration, setShowRegistration] = useState(false);
   const {
     register,
     handleSubmit,
@@ -36,17 +35,6 @@ const Login = ({ onSubmit }: LoginProps) => {
     setComplete(false);
     onSubmit(data, setComplete, setError);
   };
-  const history = useHistory();
-  useEffect(() => {
-    fetch('/settings').then(async (x) => {
-      const { isConfigured, allowPublicRegistration } = await x.json();
-      if (!isConfigured) {
-        history.push('/register');
-      } else if (allowPublicRegistration) {
-        setShowRegistration(true);
-      }
-    });
-  }, []);
   return (
     <Wrapper>
       <Column>
@@ -64,11 +52,7 @@ const Login = ({ onSubmit }: LoginProps) => {
             <Form onSubmit={handleSubmit(loginSubmit)}>
               <FormLabel htmlFor="username">
                 Username
-                <FormTextInput
-                  placeholder="Username"
-                  type="text"
-                  {...register('username', { required: 'Username is required' })}
-                />
+                <FormTextInput type="text" {...register('username', { required: 'Username is required' })} />
                 <FormIcon>
                   <User width={20} height={20} />
                 </FormIcon>
@@ -76,11 +60,7 @@ const Login = ({ onSubmit }: LoginProps) => {
               {errors.username && <FormError>{errors.username.message}</FormError>}
               <FormLabel htmlFor="password">
                 Password
-                <FormTextInput
-                  placeholder="Password"
-                  type="password"
-                  {...register('password', { required: 'Password is required' })}
-                />
+                <FormTextInput type="password" {...register('password', { required: 'Password is required' })} />
                 <FormIcon>
                   <Lock width={20} height={20} />
                 </FormIcon>
@@ -88,7 +68,7 @@ const Login = ({ onSubmit }: LoginProps) => {
               {errors.password && <FormError>{errors.password.message}</FormError>}
 
               <ActionButtons>
-                {showRegistration ? <RegisterButton variant="outline">Register</RegisterButton> : <div />}
+                <RegisterButton variant="outline">Register</RegisterButton>
                 {!isComplete && <LoadingSpinner size="32px" thickness="2px" borderSize="48px" />}
                 <LoginButton type="submit" disabled={!isComplete}>
                   Login

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

@@ -98,8 +98,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: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
+    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
   }
 `;
 const ProjectNameLabel = styled.label`
@@ -210,8 +210,8 @@ const CreateButton = styled.button`
 
   &:hover {
     color: #fff;
-    background: ${(props) => props.theme.colors.primary};
-    border-color: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
+    border-color: ${props => props.theme.colors.primary};
   }
 `;
 type NewProjectProps = {
@@ -224,7 +224,7 @@ type NewProjectProps = {
 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 = [{ label: 'No team', value: 'no-team' }, ...teams.map(t => ({ label: t.name, value: t.id }))];
   return (
     <Overlay>
       <Content>
@@ -234,7 +234,7 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
               onClose();
             }}
           >
-            <ArrowLeft width={16} height={16} color="#c2c6dc" />
+            <ArrowLeft color="#c2c6dc" />
           </HeaderLeft>
           <HeaderRight
             onClick={() => {
@@ -263,7 +263,7 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
                   onChange={(e: any) => {
                     setTeam(e.value);
                   }}
-                  value={options.find((d) => d.value === team)}
+                  value={options.find(d => d.value === team)}
                   styles={colourStyles}
                   classNamePrefix="teamSelect"
                   options={options}

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

@@ -1,37 +1,8 @@
-import React, { useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
+import React from 'react';
+import styled from 'styled-components';
 import TimeAgo from 'react-timeago';
-import { Link } from 'react-router-dom';
-import { mixin } from 'shared/utils/styles';
-import {
-  useNotificationMarkAllReadMutation,
-  useNotificationsQuery,
-  NotificationFilter,
-  ActionType,
-  useNotificationAddedSubscription,
-  useNotificationToggleReadMutation,
-} from 'shared/generated/graphql';
-import dayjs from 'dayjs';
 
-import { Popup, usePopup } from 'shared/components/PopupMenu';
-import { Bell, CheckCircleOutline, Circle, Ellipsis, UserCircle } from 'shared/icons';
-import produce from 'immer';
-import { useLocalStorage } from 'shared/hooks/useStateWithLocalStorage';
-import localStorage from 'shared/utils/localStorage';
-import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-
-function getFilterMessage(filter: NotificationFilter) {
-  switch (filter) {
-    case NotificationFilter.Unread:
-      return 'no unread';
-    case NotificationFilter.Assigned:
-      return 'no assigned';
-    case NotificationFilter.Mentioned:
-      return 'no mentioned';
-    default:
-      return 'no';
-  }
-}
+import { Popup } from 'shared/components/PopupMenu';
 
 const ItemWrapper = styled.div`
   cursor: pointer;
@@ -66,7 +37,7 @@ const ItemTextContainer = styled.div`
 const ItemTextTitle = styled.span`
   font-weight: 500;
   display: block;
-  color: ${(props) => props.theme.colors.primary};
+  color: ${props => props.theme.colors.primary};
   font-size: 14px;
 `;
 const ItemTextDesc = styled.span`
@@ -101,578 +72,38 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({ title, descr
 };
 
 const NotificationHeader = styled.div`
-  padding: 20px 28px;
+  padding: 0.75rem;
   text-align: center;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
-  background: ${(props) => props.theme.colors.primary};
+  background: ${props => props.theme.colors.primary};
 `;
 
 const NotificationHeaderTitle = styled.span`
   font-size: 14px;
-  color: ${(props) => props.theme.colors.text.secondary};
+  color: ${props => props.theme.colors.text.secondary};
 `;
 
-const EmptyMessage = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  height: 448px;
-`;
-
-const EmptyMessageLabel = styled.span`
-  margin-bottom: 80px;
-`;
-const Notifications = styled.div`
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #414561;
-  height: 448px;
-  overflow-y: scroll;
-  user-select: none;
-`;
 const NotificationFooter = styled.div`
   cursor: pointer;
   padding: 0.5rem;
   text-align: center;
-  color: ${(props) => props.theme.colors.primary};
+  color: ${props => props.theme.colors.primary};
   &:hover {
-    background: ${(props) => props.theme.colors.bg.primary};
+    background: ${props => props.theme.colors.bg.primary};
   }
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
-
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #414561;
 `;
 
-const NotificationTabs = styled.div`
-  align-items: flex-end;
-  align-self: stretch;
-  display: flex;
-  flex: 1 0 auto;
-  justify-content: flex-start;
-  max-width: 100%;
-  padding-top: 4px;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #414561;
-`;
-
-const NotificationTab = styled.div<{ active: boolean }>`
-  font-size: 80%;
-  color: ${(props) => props.theme.colors.text.primary};
-  font-size: 15px;
-  cursor: pointer;
-  display: flex;
-  user-select: none;
-
-  justify-content: center;
-  line-height: normal;
-  min-width: 1px;
-  transition-duration: 0.2s;
-  transition-property: box-shadow, color;
-  white-space: nowrap;
-  flex: 0 1 auto;
-  padding: 12px 16px;
-
-  &:first-child {
-    margin-left: 12px;
-  }
-
-  &:hover {
-    box-shadow: inset 0 -2px ${(props) => props.theme.colors.text.secondary};
-    color: ${(props) => props.theme.colors.text.secondary};
-  }
-  &:not(:last-child) {
-    margin-right: 12px;
-  }
-
-  ${(props) =>
-    props.active &&
-    css`
-      box-shadow: inset 0 -2px ${props.theme.colors.secondary};
-      color: ${props.theme.colors.secondary};
-      &:hover {
-        box-shadow: inset 0 -2px ${props.theme.colors.secondary};
-        color: ${props.theme.colors.secondary};
-      }
-    `}
-`;
-
-const NotificationLink = styled(Link)`
-  display: flex;
-  text-decoration: none;
-  padding: 16px 8px;
-  width: 100%;
-`;
-
-const NotificationControls = styled.div`
-  width: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-  visibility: hidden;
-  padding: 4px;
-`;
-
-const NotificationButtons = styled.div`
-  display: flex;
-  align-self: flex-end;
-  align-items: center;
-  margin-top: auto;
-  margin-bottom: 6px;
-`;
-
-const NotificationButton = styled.div`
-  padding: 4px 15px;
-  cursor: pointer;
-  &:hover svg {
-    fill: rgb(216, 93, 216);
-    stroke: rgb(216, 93, 216);
-  }
-`;
-
-const NotificationWrapper = styled.li<{ read: boolean }>`
-  min-height: 80px;
-  display: flex;
-  font-size: 14px;
-  transition: background-color 0.1s ease-in-out;
-  margin: 2px 8px;
-  border-radius: 8px;
-  justify-content: space-between;
-  position: relative;
-  &:hover {
-    background: ${(props) => mixin.rgba(props.theme.colors.primary, 0.5)};
-  }
-  &:hover ${NotificationLink} {
-    color: #fff;
-  }
-  &:hover ${NotificationControls} {
-    visibility: visible;
-  }
-  ${(props) =>
-    !props.read &&
-    css`
-      background: ${(props) => mixin.rgba(props.theme.colors.primary, 0.5)};
-      &:hover {
-        background: ${(props) => mixin.rgba(props.theme.colors.primary, 0.6)};
-      }
-    `}
-`;
-
-const NotificationContentFooter = styled.div`
-  margin-top: 10px;
-  display: flex;
-  align-items: center;
-  color: ${(props) => props.theme.colors.text.primary};
-`;
-
-const NotificationCausedBy = styled.div`
-  height: 48px;
-  width: 48px;
-  min-height: 48px;
-  min-width: 48px;
-`;
-const NotificationCausedByInitials = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  text: #fff;
-  font-size: 18px;
-  justify-content: center;
-  border-radius: 50%;
-  flex-shrink: 0;
-  height: 100%;
-  width: 100%;
-  border: none;
-  background: #7367f0;
-`;
-
-const NotificationCausedByImage = styled.img`
-  position: relative;
-  display: flex;
-  border-radius: 50%;
-  flex-shrink: 0;
-  height: 100%;
-  width: 100%;
-  border: none;
-  background: #7367f0;
-`;
-
-const NotificationContent = styled.div`
-  display: flex;
-  overflow: hidden;
-  flex-direction: column;
-  margin-left: 16px;
-`;
-
-const NotificationContentHeader = styled.div`
-  font-weight: bold;
-  font-size: 14px;
-  color: #fff;
-
-  svg {
-    margin-left: 8px;
-    fill: rgb(216, 93, 216);
-    stroke: rgb(216, 93, 216);
-  }
-`;
-
-const NotificationBody = styled.div`
-  display: flex;
-  align-items: center;
-  color: #fff;
-  svg {
-    fill: rgb(216, 93, 216);
-    stroke: rgb(216, 93, 216);
-  }
-`;
-
-const NotificationPrefix = styled.span`
-  color: rgb(216, 93, 216);
-  margin: 0 4px;
-`;
-
-const NotificationSeparator = styled.span`
-  margin: 0 6px;
-`;
-
-type NotificationProps = {
-  causedBy?: { fullname: string; username: string; id: string } | null;
-  createdAt: string;
-  read: boolean;
-  data: Array<{ key: string; value: string }>;
-  actionType: ActionType;
-  onToggleRead: () => void;
-};
-
-const Notification: React.FC<NotificationProps> = ({ causedBy, createdAt, data, actionType, read, onToggleRead }) => {
-  const prefix: any = [];
-  const { hidePopup } = usePopup();
-  const dataMap = new Map<string, string>();
-  data.forEach((d) => dataMap.set(d.key, d.value));
-  let link = '#';
-  switch (actionType) {
-    case ActionType.TaskAssigned:
-      prefix.push(<UserCircle key="profile" width={14} height={16} />);
-      prefix.push(
-        <NotificationPrefix key="prefix">
-          <span style={{ fontWeight: 'bold' }}>{causedBy ? causedBy.fullname : 'Removed user'}</span>
-        </NotificationPrefix>,
-      );
-      prefix.push(<span key="content">assigned you to the task &quote;{dataMap.get('TaskName')}&quote;</span>);
-      link = `/p/${dataMap.get('ProjectID')}/board/c/${dataMap.get('TaskID')}`;
-      break;
-    case ActionType.DueDateReminder:
-      prefix.push(<Bell key="profile" width={14} height={16} />);
-      prefix.push(<NotificationPrefix key="prefix">{dataMap.get('TaskName')}</NotificationPrefix>);
-      const now = dayjs();
-      if (dayjs(dataMap.get('DueDate')).isBefore(dayjs())) {
-        prefix.push(
-          <span key="content">is due {dayjs.duration(now.diff(dayjs(dataMap.get('DueAt')))).humanize(true)}</span>,
-        );
-      } else {
-        prefix.push(
-          <span key="content">
-            has passed the due date {dayjs.duration(dayjs(dataMap.get('DueAt')).diff(now)).humanize(true)}
-          </span>,
-        );
-      }
-      link = `/p/${dataMap.get('ProjectID')}/board/c/${dataMap.get('TaskID')}`;
-      break;
-
-    default:
-      throw new Error('unknown action type');
-  }
-
-  return (
-    <NotificationWrapper read={read}>
-      <NotificationLink to={link} onClick={hidePopup}>
-        <NotificationCausedBy>
-          <NotificationCausedByInitials>
-            {causedBy
-              ? causedBy.fullname
-                  .split(' ')
-                  .map((n) => n[0])
-                  .join('.')
-              : 'RU'}
-          </NotificationCausedByInitials>
-        </NotificationCausedBy>
-        <NotificationContent>
-          <NotificationBody>{prefix}</NotificationBody>
-          <NotificationContentFooter>
-            <span>{dayjs.duration(dayjs(createdAt).diff(dayjs())).humanize(true)}</span>
-            <NotificationSeparator>•</NotificationSeparator>
-            <span>{dataMap.get('ProjectName')}</span>
-          </NotificationContentFooter>
-        </NotificationContent>
-      </NotificationLink>
-      <NotificationControls>
-        <NotificationButtons>
-          <NotificationButton onClick={() => onToggleRead()}>
-            {read ? <Circle width={18} height={18} /> : <CheckCircleOutline width={18} height={18} />}
-          </NotificationButton>
-        </NotificationButtons>
-      </NotificationControls>
-    </NotificationWrapper>
-  );
-};
-
-const PopupContent = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding-bottom: 10px;
-  border-color: #414561;
-`;
-
-const tabs = [
-  { label: 'All', key: NotificationFilter.All },
-  { label: 'Unread', key: NotificationFilter.Unread },
-  { label: 'I was mentioned', key: NotificationFilter.Mentioned },
-  { label: 'Assigned to me', key: NotificationFilter.Assigned },
-];
-
-type NotificationEntry = {
-  id: string;
-  read: boolean;
-  readAt?: string | undefined | null;
-  notification: {
-    id: string;
-    data: Array<{ key: string; value: string }>;
-    actionType: ActionType;
-    causedBy?: { id: string; username: string; fullname: string } | undefined | null;
-    createdAt: string;
-  };
-};
-type NotificationPopupProps = {
-  onToggleRead: () => void;
-};
-
-const NotificationHeaderMenu = styled.div`
-  position: absolute;
-  right: 16px;
-  top: 16px;
-`;
-
-const NotificationHeaderMenuIcon = styled.div`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  svg {
-    fill: #fff;
-    stroke: #fff;
-  }
-`;
-
-const NotificationHeaderMenuContent = styled.div<{ show: boolean }>`
-  min-width: 130px;
-  position: absolute;
-  top: 16px;
-  background: #fff;
-  border-radius: 6px;
-  height: 50px;
-  visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #414561;
-  background: #262c49;
-  padding: 6px;
-  display: flex;
-  flex-direction: column;
-`;
-
-const NotificationHeaderMenuButton = styled.div`
-  position: relative;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  &:hover {
-    background: ${(props) => props.theme.colors.primary};
-  }
-`;
-const NotificationPopup: React.FC<NotificationPopupProps> = ({ onToggleRead }) => {
-  const [filter, setFilter] = useLocalStorage<NotificationFilter>(
-    localStorage.NOTIFICATIONS_FILTER,
-    NotificationFilter.Unread,
-  );
-  const [data, setData] = useState<{ nodes: Array<NotificationEntry>; hasNextPage: boolean; cursor: string }>({
-    nodes: [],
-    hasNextPage: false,
-    cursor: '',
-  });
-  const [toggleRead] = useNotificationToggleReadMutation({
-    onCompleted: (data) => {
-      setData((prev) => {
-        return produce(prev, (draft) => {
-          const idx = draft.nodes.findIndex((n) => n.id === data.notificationToggleRead.id);
-          if (idx !== -1) {
-            draft.nodes[idx].read = data.notificationToggleRead.read;
-            draft.nodes[idx].readAt = data.notificationToggleRead.readAt;
-          }
-        });
-      });
-      onToggleRead();
-    },
-  });
-  const { fetchMore } = useNotificationsQuery({
-    variables: { limit: 8, filter },
-    fetchPolicy: 'network-only',
-    onCompleted: (d) => {
-      setData((prev) => ({
-        hasNextPage: d.notified.pageInfo.hasNextPage,
-        cursor: d.notified.pageInfo.endCursor ?? '',
-        nodes: [...prev.nodes, ...d.notified.notified],
-      }));
-    },
-  });
-  useNotificationAddedSubscription({
-    onSubscriptionData: (d) => {
-      setData((n) => {
-        if (d.subscriptionData.data) {
-          return {
-            ...n,
-            nodes: [d.subscriptionData.data.notificationAdded, ...n.nodes],
-          };
-        }
-        return n;
-      });
-    },
-  });
-  const [toggleAllRead] = useNotificationMarkAllReadMutation();
-
-  const [showHeaderMenu, setShowHeaderMenu] = useState(false);
-
-  const $menuContent = useRef<HTMLDivElement>(null);
-  useOnOutsideClick($menuContent, true, () => setShowHeaderMenu(false), null);
+const NotificationPopup: React.FC = ({ children }) => {
   return (
     <Popup title={null} tab={0} borders={false} padding={false}>
-      <PopupContent>
       <NotificationHeader>
         <NotificationHeaderTitle>Notifications</NotificationHeaderTitle>
-          <NotificationHeaderMenu>
-            <NotificationHeaderMenuIcon onClick={() => setShowHeaderMenu(true)}>
-              <Ellipsis size={18} color="#fff" vertical={false} />
-              <NotificationHeaderMenuContent ref={$menuContent} show={showHeaderMenu}>
-                <NotificationHeaderMenuButton
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setShowHeaderMenu(() => false);
-                    toggleAllRead().then(() => {
-                      setData((prev) =>
-                        produce(prev, (draftData) => {
-                          draftData.nodes = draftData.nodes.map((node) => ({ ...node, read: true }));
-                        }),
-                      );
-                      onToggleRead();
-                    });
-                  }}
-                >
-                  Mark all as read
-                </NotificationHeaderMenuButton>
-              </NotificationHeaderMenuContent>
-            </NotificationHeaderMenuIcon>
-          </NotificationHeaderMenu>
       </NotificationHeader>
-        <NotificationTabs>
-          {tabs.map((tab) => (
-            <NotificationTab
-              key={tab.key}
-              onClick={() => {
-                if (filter !== tab.key) {
-                  setData({ cursor: '', hasNextPage: false, nodes: [] });
-                  setFilter(tab.key);
-                }
-              }}
-              active={tab.key === filter}
-            >
-              {tab.label}
-            </NotificationTab>
-          ))}
-        </NotificationTabs>
-        {data.nodes.length !== 0 ? (
-          <Notifications
-            onScroll={({ currentTarget }) => {
-              if (Math.ceil(currentTarget.scrollTop + currentTarget.clientHeight) >= currentTarget.scrollHeight) {
-                if (data.hasNextPage) {
-                  console.log(`fetching more = ${data.cursor} - ${data.hasNextPage}`);
-                  fetchMore({
-                    variables: {
-                      limit: 8,
-                      filter,
-                      cursor: data.cursor,
-                    },
-                    updateQuery: (prev, { fetchMoreResult }) => {
-                      if (!fetchMoreResult) return prev;
-                      setData((d) => ({
-                        cursor: fetchMoreResult.notified.pageInfo.endCursor ?? '',
-                        hasNextPage: fetchMoreResult.notified.pageInfo.hasNextPage,
-                        nodes: [...d.nodes, ...fetchMoreResult.notified.notified],
-                      }));
-                      return {
-                        ...prev,
-                        notified: {
-                          ...prev.notified,
-                          pageInfo: {
-                            ...fetchMoreResult.notified.pageInfo,
-                          },
-                          notified: [...prev.notified.notified, ...fetchMoreResult.notified.notified],
-                        },
-                      };
-                    },
-                  });
-                }
-              }
-            }}
-          >
-            {data.nodes.map((n) => (
-              <Notification
-                key={n.id}
-                read={n.read}
-                actionType={n.notification.actionType}
-                data={n.notification.data}
-                createdAt={n.notification.createdAt}
-                causedBy={n.notification.causedBy}
-                onToggleRead={() =>
-                  toggleRead({
-                    variables: { notifiedID: n.id },
-                    optimisticResponse: {
-                      __typename: 'Mutation',
-                      notificationToggleRead: {
-                        __typename: 'Notified',
-                        id: n.id,
-                        read: !n.read,
-                        readAt: new Date().toUTCString(),
-                      },
-                    },
-                  }).then(() => {
-                    onToggleRead();
-                  })
-                }
-              />
-            ))}
-          </Notifications>
-        ) : (
-          <EmptyMessage>
-            <EmptyMessageLabel>You have {getFilterMessage(filter)} notifications</EmptyMessageLabel>
-          </EmptyMessage>
-        )}
-      </PopupContent>
+      <ul>{children}</ul>
+      <NotificationFooter>View All</NotificationFooter>
     </Popup>
   );
 };

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

@@ -218,7 +218,7 @@ export const PopupProvider: React.FC = ({ children }) => {
 
   const setTab = (newTab: number, options?: PopupOptions) => {
     setState((prevState: PopupState) =>
-      produce(prevState, (draftState) => {
+      produce(prevState, draftState => {
         draftState.previousTab = currentState.currentTab;
         draftState.currentTab = newTab;
         if (options) {
@@ -296,7 +296,7 @@ const PopupMenu: React.FC<Props> = ({ width, title, top, left, onClose, noHeader
       <Wrapper padding borders>
         {onPrevious && (
           <PreviousButton onClick={onPrevious}>
-            <AngleLeft size={16} color="#c2c6dc" />
+            <AngleLeft color="#c2c6dc" />
           </PreviousButton>
         )}
         {noHeader ? (
@@ -332,7 +332,7 @@ export const Popup: React.FC<PopupProps> = ({ borders = true, padding = true, ti
               setTab(0);
             }}
           >
-            <AngleLeft size={16} color="#c2c6dc" />
+            <AngleLeft color="#c2c6dc" />
           </PreviousButton>
         )}
         {title && (

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

@@ -2,15 +2,15 @@ import React, { useRef } from 'react';
 import styled from 'styled-components';
 
 export const Container = styled.div<{ size: number | string; bgColor: string | null; backgroundURL: string | null }>`
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
+  width: ${props => props.size}px;
+  height: ${props => props.size}px;
   border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-weight: 700;
-  background: ${(props) => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
+  background: ${props => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
   background-position: center;
   background-size: contain;
 `;
@@ -22,10 +22,6 @@ type ProfileIconProps = {
 };
 
 const ProfileIcon: React.FC<ProfileIconProps> = ({ user, onProfileClick, size }) => {
-  let realSize = size;
-  if (size === null) {
-    realSize = 28;
-  }
   const $profileRef = useRef<HTMLDivElement>(null);
   return (
     <Container
@@ -33,7 +29,7 @@ const ProfileIcon: React.FC<ProfileIconProps> = ({ user, onProfileClick, size })
       onClick={() => {
         onProfileClick($profileRef, user);
       }}
-      size={realSize}
+      size={size}
       backgroundURL={user.profileIcon.url ?? null}
       bgColor={user.profileIcon.bgColor ?? null}
     >
@@ -42,4 +38,8 @@ const ProfileIcon: React.FC<ProfileIconProps> = ({ user, onProfileClick, size })
   );
 };
 
+ProfileIcon.defaultProps = {
+  size: 28,
+};
+
 export default ProfileIcon;

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

@@ -311,7 +311,7 @@ const ResetPasswordTab: React.FC<ResetPasswordTabProps> = ({ onResetPassword })
 };
 
 type UserInfoData = {
-  fullName: string;
+  full_name: string;
   bio: string;
   initials: string;
   email: string;
@@ -355,12 +355,12 @@ const UserInfoTab: React.FC<UserInfoTabProps> = ({
         })}
       >
         <UserInfoInput
-          {...register('fullName', { required: 'Full name is required' })}
+          {...register('full_name', { required: 'Full name is required' })}
           defaultValue={profile.fullName}
           width="100%"
           label="Name"
         />
-        {errors.fullName && <FormError>{errors.fullName.message}</FormError>}
+        {errors.full_name && <FormError>{errors.full_name.message}</FormError>}
         <UserInfoInput
           defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.initials : ''}
           {...register('initials', {

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

@@ -9,22 +9,14 @@ type ActivityMessageProps = {
 };
 
 function getVariable(data: Array<TaskActivityData>, name: string) {
-  const target = data.find((d) => d.name === name);
+  const target = data.find(d => d.name === name);
   return target ? target.value : null;
 }
 
-function getVariableBool(data: Array<TaskActivityData>, name: string, defaultValue = false) {
-  const target = data.find((d) => d.name === name);
-  return target ? target.value === 'true' : defaultValue;
-}
-
-function renderDate(timestamp: string | null, hasTime: boolean) {
+function renderDate(timestamp: string | null) {
   if (timestamp) {
-    if (hasTime) {
     return dayjs(timestamp).format('MMM D [at] h:mm A');
   }
-    return dayjs(timestamp).format('MMM D');
-  }
   return null;
 }
 
@@ -38,19 +30,13 @@ const ActivityMessage: React.FC<ActivityMessageProps> = ({ type, data }) => {
       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'),
-        getVariableBool(data, 'HasTime', true),
-      )}`;
+      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'),
-        getVariableBool(data, 'HasTime', true),
-      )}`;
+      message = `changed the due date of this task to ${renderDate(getVariable(data, 'CurDueDate'))}`;
       break;
     case ActivityType.TaskMarkedComplete:
       message = `marked this task complete`;

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

@@ -13,7 +13,6 @@ import {
   Smile,
 } from 'shared/icons';
 import { toArray } from 'react-emoji-render';
-import { useCurrentUser } from 'App/context';
 import DOMPurify from 'dompurify';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
@@ -81,8 +80,11 @@ import {
   ActivityItemHeaderTitleName,
   ActivityItemComment,
 } from './Styles';
+import { useCurrentUser } from 'App/context';
 
-const TaskDetailsLoading: React.FC = () => {
+type TaskDetailsProps = {};
+
+const TaskDetailsLoading: React.FC<TaskDetailsProps> = () => {
   const { user } = useCurrentUser();
   return (
     <Container>

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

@@ -4,7 +4,6 @@ import { mixin } from 'shared/utils/styles';
 import Button from 'shared/components/Button';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import theme from 'App/ThemeStyles';
-import { Checkmark } from 'shared/icons';
 
 export const Container = styled.div`
   display: flex;
@@ -23,14 +22,14 @@ export const MarkCompleteButton = styled.button<{ invert: boolean; disabled?: bo
   position: relative;
   border: none;
   cursor: pointer;
-  border-radius: ${(props) => props.theme.borderRadius.alternate};
+  border-radius: ${props => props.theme.borderRadius.alternate};
   display: flex;
   align-items: center;
   background: transparent;
   & span {
     margin-left: 4px;
   }
-  ${(props) =>
+  ${props =>
     props.invert
       ? css`
           background: ${props.theme.colors.success};
@@ -64,7 +63,7 @@ export const MarkCompleteButton = styled.button<{ invert: boolean; disabled?: bo
             color: ${props.theme.colors.success};
           }
         `}
-  ${(props) =>
+  ${props =>
     props.invert &&
     css`
       opacity: 0.6;
@@ -90,7 +89,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: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
   padding-top: 4px;
   letter-spacing: 0.5px;
   text-transform: uppercase;
@@ -111,12 +110,12 @@ export const skeletonKeyframes = keyframes`
 
 export const SidebarButton = styled.div<{ $loading?: boolean }>`
   font-size: 14px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
   min-height: 32px;
   width: 100%;
   border-radius: 6px;
 
-  ${(props) =>
+  ${props =>
     props.$loading
       ? css`
           background: ${props.theme.colors.bg.primary};
@@ -184,7 +183,7 @@ export const TaskDetailsTitleWrapper = styled.div<{ $loading?: boolean }>`
   margin: 8px 0 4px 0;
   display: flex;
   border-radius: 6px;
-  ${(props) => props.$loading && `background: ${props.theme.colors.bg.primary};`}
+  ${props => props.$loading && `background: ${props.theme.colors.bg.primary};`}
 `;
 
 export const TaskDetailsTitle = styled(TextareaAutosize)<{ $loading?: boolean }>`
@@ -202,7 +201,7 @@ export const TaskDetailsTitle = styled(TextareaAutosize)<{ $loading?: boolean }>
   &:disabled {
     opacity: 1;
   }
-  ${(props) =>
+  ${props =>
     props.$loading
       ? css`
           background-image: linear-gradient(90deg, ${defaultBaseColor}, ${defaultHighlightColor}, ${defaultBaseColor});
@@ -227,7 +226,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: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
   padding-top: 8px;
   letter-spacing: 0.5px;
   text-transform: uppercase;
@@ -238,7 +237,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 ${props => props.theme.colors.alternate};
   display: flex;
   flex-direction: column;
 `;
@@ -256,10 +255,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 ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
   }
   &:hover svg {
-    fill: ${(props) => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
+    fill: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
   }
 `;
 
@@ -274,17 +273,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 ${props => mixin.darken(props.theme.colors.alternate, 0.15)};
   }
   &:hover ${AssignUserIcon} {
-    border: 1px solid ${(props) => props.theme.colors.alternate};
+    border: 1px solid ${props => props.theme.colors.alternate};
   }
 `;
 
 export const AssignUserLabel = styled.span`
   flex: 1 1 auto;
   line-height: 15px;
-  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.75)};
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
 `;
 
 export const ExtraActionsSection = styled.div`
@@ -296,7 +295,7 @@ export const ExtraActionsSection = styled.div`
 `;
 
 export const ActionButtonsTitle = styled.h3`
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.04em;
@@ -306,17 +305,16 @@ 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: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.5)};
   text-align: left;
   transition: transform 0.2s ease;
   & span {
-    position: unset;
     justify-content: flex-start;
   }
   &:hover {
     box-shadow: none;
     transform: translateX(4px);
-    background: ${(props) => mixin.rgba(props.theme.colors.bg.primary, 0.75)};
+    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.75)};
   }
 `;
 
@@ -335,10 +333,10 @@ export const HeaderActionIcon = styled.div`
 
   cursor: pointer;
   svg {
-    fill: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.75)};
+    fill: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
   }
   &:hover svg {
-    fill: ${(props) => mixin.rgba(props.theme.colors.primary, 0.75)});
+    fill: ${props => mixin.rgba(props.theme.colors.primary, 0.75)});
   }
 `;
 
@@ -395,7 +393,7 @@ export const MetaDetail = styled.div`
 `;
 
 export const MetaDetailTitle = styled.h3`
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.04em;
@@ -414,7 +412,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: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
   cursor: pointer;
   &:hover {
     opacity: 0.8;
@@ -429,7 +427,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: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
   cursor: pointer;
   &:hover {
     opacity: 0.8;
@@ -445,7 +443,7 @@ export const TaskDetailLabel = styled.div<{ color: string }>`
   &:hover {
     opacity: 0.8;
   }
-  background-color: ${(props) => props.color};
+  background-color: ${props => props.color};
   color: #fff;
   cursor: pointer;
   display: flex;
@@ -498,22 +496,17 @@ export const TabBarSection = styled.div`
   margin-top: 2px;
   padding-left: 23px;
   display: flex;
-  justify-content: space-between;
   text-transform: uppercase;
   min-height: 35px;
   border-bottom: 1px solid #414561;
 `;
 
 export const TabBarItem = styled.div`
-  box-shadow: inset 0 -2px ${(props) => props.theme.colors.primary};
+  box-shadow: inset 0 -2px ${props => props.theme.colors.primary};
   padding: 12px 7px 14px 7px;
   margin-bottom: -1px;
   margin-right: 36px;
-  color: ${(props) => props.theme.colors.text.primary};
-`;
-
-export const TabBarButton = styled(Button)`
-  padding: 6px 12px;
+  color: ${props => props.theme.colors.text.primary};
 `;
 
 export const CommentContainer = styled.div`
@@ -549,13 +542,13 @@ export const CommentTextArea = styled(TextareaAutosize)<{ $showCommentActions: b
   line-height: 28px;
   padding: 4px 6px;
   border-radius: 6px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
   background: #1f243e;
   border: none;
   transition: max-height 200ms, height 200ms, min-height 200ms;
   min-height: 36px;
   max-height: 36px;
-  ${(props) =>
+  ${props =>
     props.$showCommentActions
       ? css`
           min-height: 80px;
@@ -568,7 +561,7 @@ export const CommentTextArea = styled(TextareaAutosize)<{ $showCommentActions: b
 `;
 
 export const CommentEditorActions = styled.div<{ visible: boolean }>`
-  display: ${(props) => (props.visible ? 'flex' : 'none')};
+  display: ${props => (props.visible ? 'flex' : 'none')};
   align-items: center;
   padding: 5px 5px 5px 9px;
   border-top: 1px solid #414561;
@@ -601,7 +594,7 @@ export const ActivityItemCommentAction = styled.div`
   justify-content: center;
   cursor: pointer;
   svg {
-    fill: ${(props) => props.theme.colors.text.primary} !important;
+    fill: ${props => props.theme.colors.text.primary} !important;
   }
 `;
 
@@ -621,7 +614,7 @@ export const ActivityItemHeader = styled.div<{ editable?: boolean }>`
   display: flex;
   flex-direction: column;
   padding-left: 8px;
-  ${(props) => props.editable && 'width: 100%;'}
+  ${props => props.editable && 'width: 100%;'}
 `;
 export const ActivityItemHeaderUser = styled(TaskAssignee)`
   align-items: start;
@@ -630,7 +623,7 @@ export const ActivityItemHeaderUser = styled(TaskAssignee)`
 export const ActivityItemHeaderTitle = styled.div`
   display: flex;
   align-items: center;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
   padding-bottom: 2px;
 `;
 
@@ -641,8 +634,8 @@ export const ActivityItemHeaderTitleName = styled.span`
 
 export const ActivityItemTimestamp = styled.span<{ margin: number }>`
   font-size: 12px;
-  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.65)};
-  margin-left: ${(props) => props.margin}px;
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.65)};
+  margin-left: ${props => props.margin}px;
 `;
 
 export const ActivityItemDetails = styled.div`
@@ -656,11 +649,11 @@ export const ActivityItemComment = styled.div<{ editable: boolean }>`
   border-radius: 3px;
   ${mixin.boxShadowCard}
   position: relative;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${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%;'}
+  background-color: ${props => mixin.darken(props.theme.colors.alternate, 0.1)};
+  ${props => props.editable && 'width: 100%;'}
 
   & span {
     display: inline-flex;
@@ -690,7 +683,7 @@ export const ActivityItemCommentActions = styled.div`
 
 export const ActivityItemLog = styled.span`
   margin-left: 2px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
 `;
 
 export const ViewRawButton = styled.button`
@@ -701,9 +694,9 @@ export const ViewRawButton = styled.button`
   right: 4px;
   bottom: -24px;
   cursor: pointer;
-  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.25)};
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.25)};
   &:hover {
-    color: ${(props) => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.primary};
   }
 `;
 
@@ -719,8 +712,3 @@ export const TaskDetailsEditor = styled(TextareaAutosize)`
   outline: none;
   border: none;
 `;
-
-export const WatchedCheckmark = styled(Checkmark)`
-  position: absolute;
-  right: 16px;
-`;

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

@@ -1,5 +1,4 @@
 import React, { useState, useRef } from 'react';
-import { useCurrentUser } from 'App/context';
 import {
   Plus,
   User,
@@ -12,7 +11,6 @@ import {
   CheckSquareOutline,
   At,
   Smile,
-  Eye,
 } from 'shared/icons';
 import { toArray } from 'react-emoji-render';
 import DOMPurify from 'dompurify';
@@ -80,13 +78,12 @@ import {
   ActivityItemHeaderTitle,
   ActivityItemHeaderTitleName,
   ActivityItemComment,
-  TabBarButton,
-  WatchedCheckmark,
 } from './Styles';
 import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
 import onDragEnd from './onDragEnd';
-import plugin from './remark';
+import { plugin as em } from './remark';
 import ActivityMessage from './ActivityMessage';
+import { useCurrentUser } from 'App/context';
 
 const parseEmojis = (value: string) => {
   const emojisArray = toArray(value);
@@ -139,7 +136,7 @@ const StreamComment: React.FC<StreamCommentProps> = ({
                   onCreateComment={onUpdateComment}
                 />
               ) : (
-                <ReactMarkdown skipHtml plugins={[plugin]}>
+                <ReactMarkdown skipHtml plugins={[em]}>
                   {DOMPurify.sanitize(comment.message, { FORBID_TAGS: ['style', 'img'] })}
                 </ReactMarkdown>
               )}
@@ -239,7 +236,6 @@ type TaskDetailsProps = {
   onToggleChecklistItem: (itemID: string, complete: boolean) => void;
   onOpenAddMemberPopup: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
   onOpenAddLabelPopup: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
-  onToggleTaskWatch: (task: Task, watched: boolean) => void;
   onOpenDueDatePopop: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
   onOpenAddChecklistPopup: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
   onCreateComment: (task: Task, message: string) => void;
@@ -261,7 +257,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
   task,
   editableComment = null,
   onDeleteChecklist,
-  onToggleTaskWatch,
   onTaskNameChange,
   onCommentShowActions,
   onOpenAddChecklistPopup,
@@ -350,9 +345,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                 }
               }}
             >
-              {task.dueDate.at ? (
+              {task.dueDate ? (
                 <SidebarButtonText>
-                  {dayjs(task.dueDate.at).format(task.hasTime ? 'MMM D [at] h:mm A' : 'MMMM D')}
+                  {dayjs(task.dueDate).format(task.hasTime ? 'MMM D [at] h:mm A' : 'MMMM D')}
                 </SidebarButtonText>
               ) : (
                 <SidebarButtonText>No due date</SidebarButtonText>
@@ -422,14 +417,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                 Checklist
               </ActionButton>
               <ActionButton>Cover</ActionButton>
-              <ActionButton
-                onClick={() => {
-                  onToggleTaskWatch(task, !task.watched);
-                }}
-                icon={<Eye width={12} height={12} />}
-              >
-                Watch {task.watched && <WatchedCheckmark width={18} height={18} />}
-              </ActionButton>
             </ExtraActionsSection>
           )}
         </LeftSidebarContent>
@@ -527,7 +514,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                 <Editor
                   defaultValue={task.description ?? ''}
                   readOnly={user === null || !editTaskDescription}
-                  theme={dark}
                   autoFocus
                   onChange={(value) => {
                     setSaveTimeout(() => {
@@ -631,7 +617,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
             {activityStream.map((stream) =>
               stream.data.type === 'comment' ? (
                 <StreamComment
-                  key={stream.id}
                   onExtraActions={onCommentShowActions}
                   onCancelCommentEdit={onCancelCommentEdit}
                   onUpdateComment={(message) => onUpdateComment(stream.id, message)}
@@ -640,7 +625,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                 />
               ) : (
                 <StreamActivity
-                  key={stream.id}
                   activity={task.activity && task.activity.find((activity) => activity.id === stream.id)}
                 />
               ),

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

@@ -1,4 +1,4 @@
-import { visit } from 'unist-util-visit';
+import visit from 'unist-util-visit';
 import emoji from 'node-emoji';
 import { emoticon } from 'emoticon';
 import { Emoji } from 'emoji-mart';
@@ -15,31 +15,34 @@ const DEFAULT_SETTINGS = {
 };
 
 function plugin(options) {
-  const settings = { ...DEFAULT_SETTINGS, ...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 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 ? ' ' : '';
-    const icon = iconFull ? iconFull.emoji + addPad : iconPart && iconPart.emoji + addPad + trimmedChar;
+    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} `;
+      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);
       // jnode.type = 'html';
       // jnode.tagName = 'div';
@@ -55,10 +58,11 @@ function plugin(options) {
       if (emoticonEnable) {
         // node.value = node.value.replace(RE_SHORT, getEmojiByShortCode);
       }
+      console.log(node);
     });
   }
 
   return transformer;
 }
 
-export default plugin;
+export { plugin };

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

@@ -1,8 +1,8 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { Home, Star, Bell, AngleDown, BarChart, CheckCircle, ListUnordered } from 'shared/icons';
-import { Link } from 'react-router-dom';
 import { RoleCode } from 'shared/generated/graphql';
 import * as S from './Styles';
+import { Link } from 'react-router-dom';
 
 export type MenuItem = {
   name: string;

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

@@ -6,11 +6,11 @@ import { NavLink, Link } from 'react-router-dom';
 import TaskAssignee from 'shared/components/TaskAssignee';
 
 export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
-  z-index: ${(props) => props.zIndex};
+  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 ${props => props.theme.colors.bg.primary},
+    inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.primary, 0.07)};
 `;
 
 export const NavbarWrapper = styled.div`
@@ -27,9 +27,9 @@ export const NavbarHeader = styled.header`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: ${(props) => props.theme.colors.bg.primary};
+  background: ${props => props.theme.colors.bg.primary};
   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 ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
 `;
 export const Breadcrumbs = styled.div`
   color: rgb(94, 108, 132);
@@ -59,7 +59,7 @@ export const ProjectSwitchInner = styled.div`
   flex-direction: column;
   justify-content: center;
 
-  background-color: ${(props) => props.theme.colors.primary};
+  background-color: ${props => props.theme.colors.primary};
 `;
 
 export const ProjectSwitch = styled.div`
@@ -109,27 +109,10 @@ export const NavbarLink = styled(Link)`
   cursor: pointer;
 `;
 
-export const NotificationCount = styled.div`
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  background: #7367f0;
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 3px solid rgb(16, 22, 58);
-  color: #fff;
-  font-size: 14px;
-`;
-
 export const IconContainerWrapper = styled.div<{ disabled?: boolean }>`
   margin-right: 20px;
-  position: relative;
   cursor: pointer;
-  ${(props) =>
+  ${props =>
     props.disabled &&
     css`
       opacity: 0.5;
@@ -159,14 +142,14 @@ export const ProfileIcon = styled.div<{
   justify-content: center;
   color: #fff;
   font-weight: 700;
-  background: ${(props) => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
+  background: ${props => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
   background-position: center;
   background-size: contain;
 `;
 
 export const ProjectMeta = styled.div<{ nameOnly?: boolean }>`
   display: flex;
-  ${(props) => !props.nameOnly && 'padding-top: 9px;'}
+  ${props => !props.nameOnly && 'padding-top: 9px;'}
   margin-left: -6px;
   align-items: center;
   max-width: 100%;
@@ -184,7 +167,7 @@ export const ProjectTabs = styled.div`
 
 export const ProjectTab = styled(NavLink)`
   font-size: 80%;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
   font-size: 15px;
   cursor: pointer;
   display: flex;
@@ -201,22 +184,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 ${props => props.theme.colors.text.secondary};
+    color: ${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 ${props => props.theme.colors.secondary};
+    color: ${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 ${props => props.theme.colors.secondary};
+    color: ${props => props.theme.colors.secondary};
   }
 `;
 
 export const ProjectName = styled.h1`
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
   font-weight: 600;
   font-size: 20px;
   padding: 3px 10px 3px 8px;
@@ -258,7 +241,7 @@ export const ProjectNameTextarea = styled.input`
   font-size: 20px;
   padding: 3px 10px 3px 8px;
   &:focus {
-    box-shadow: ${(props) => props.theme.colors.primary} 0px 0px 0px 1px;
+    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
   }
 `;
 
@@ -276,7 +259,7 @@ export const ProjectSwitcher = styled.button`
   color: #c2c6dc;
   cursor: pointer;
   &:hover {
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
   }
 `;
 
@@ -300,7 +283,7 @@ export const ProjectSettingsButton = styled.button`
   justify-content: center;
   cursor: pointer;
   &:hover {
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
   }
 `;
 
@@ -326,7 +309,7 @@ export const SignIn = styled(Button)`
 
 export const NavSeparator = styled.div`
   width: 1px;
-  background: ${(props) => props.theme.colors.border};
+  background: ${props => props.theme.colors.border};
   height: 34px;
   margin: 0 20px;
 `;
@@ -343,11 +326,11 @@ export const LogoContainer = styled(Link)`
 
 export const TaskcafeTitle = styled.h2`
   margin-left: 5px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${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: ${props => props.theme.colors.text.primary};
+  stroke: ${props => props.theme.colors.text.primary};
 `;

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

@@ -36,7 +36,6 @@ import {
   ProjectMember,
   ProjectMembers,
   ProjectSwitchInner,
-  NotificationCount,
 } from './Styles';
 
 type IconContainerProps = {
@@ -145,7 +144,7 @@ const ProjectHeading: React.FC<ProjectHeadingProps> = ({
       </ProjectSettingsButton>
       {onFavorite && (
         <ProjectSettingsButton onClick={() => onFavorite()}>
-          <Star filled width={16} height={16} color="#c2c6dc" />
+          <Star width={16} height={16} color="#c2c6dc" />
         </ProjectSettingsButton>
       )}
     </>
@@ -186,7 +185,6 @@ type NavBarProps = {
   projectMembers?: Array<TaskUser> | null;
   projectInvitedMembers?: Array<InvitedUser> | null;
 
-  hasUnread: boolean;
   onRemoveFromBoard?: (userID: string) => void;
   onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
   onInvitedMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, email: string) => void;
@@ -205,7 +203,6 @@ const NavBar: React.FC<NavBarProps> = ({
   onOpenProjectFinder,
   onFavorite,
   onSetTab,
-  hasUnread,
   projectInvitedMembers,
   onChangeRole,
   name,
@@ -231,7 +228,7 @@ const NavBar: React.FC<NavBarProps> = ({
     <NavbarWrapper>
       <NavbarHeader>
         <ProjectActions>
-          <ProjectSwitch ref={$finder} onClick={(e) => onOpenProjectFinder($finder)}>
+          <ProjectSwitch ref={$finder} onClick={e => onOpenProjectFinder($finder)}>
             <ProjectSwitchInner>
               <TaskcafeLogo innerColor="#9f46e4" outerColor="#000" width={32} height={32} />
             </ProjectSwitchInner>
@@ -307,7 +304,7 @@ const NavBar: React.FC<NavBarProps> = ({
                 ))}
                 {canInviteUser && (
                   <InviteButton
-                    onClick={($target) => {
+                    onClick={$target => {
                       if (onInviteUser) {
                         onInviteUser($target);
                       }
@@ -333,9 +330,8 @@ const NavBar: React.FC<NavBarProps> = ({
           <IconContainer disabled onClick={NOOP}>
             <ListUnordered width={20} height={20} />
           </IconContainer>
-          <IconContainer onClick={onNotificationClick}>
-            <Bell width={20} height={20} />
-            {hasUnread && <NotificationCount />}
+          <IconContainer disabled onClick={onNotificationClick}>
+            <Bell color="#c2c6dc" size={20} />
           </IconContainer>
           <IconContainer disabled onClick={NOOP}>
             <BarChart width={20} height={20} />

frontend/src/shared/graphql/createProject.graphqls

@@ -1,7 +1,6 @@
 mutation createProject($teamID: UUID, $name: String!) {
   createProject(input: {teamID: $teamID, name: $name}) {
     id
-    shortId
     name
     team {
       id

frontend/src/shared/graphql/findProject.ts

@@ -2,9 +2,8 @@ import gql from 'graphql-tag';
 import TASK_FRAGMENT from './fragments/task';
 
 const FIND_PROJECT_QUERY = gql`
-query findProject($projectID: String!) {
-  findProject(input: { projectShortID: $projectID }) {
-    id
+query findProject($projectID: UUID!) {
+  findProject(input: { projectID: $projectID }) {
     name
     publicOn
     team {

frontend/src/shared/graphql/findTask.graphqls

@@ -1,18 +1,9 @@
-query findTask($taskID: String!) {
-  findTask(input: {taskShortID: $taskID}) {
+query findTask($taskID: UUID!) {
+  findTask(input: {taskID: $taskID}) {
     id
-    shortId
     name
-    watched
     description
-    dueDate {
-      at
-      notifications {
-        id
-        period
-        duration
-      }
-    }
+    dueDate
     position
     complete
     hasTime

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

@@ -3,15 +3,11 @@ import gql from 'graphql-tag';
 const TASK_FRAGMENT = gql`
   fragment TaskFields on Task {
     id
-    shortId
     name
     description
-    dueDate {
-      at
-    }
+    dueDate
     hasTime
     complete
-    watched
     completedAt
     position
     badges {
@@ -19,10 +15,6 @@ const TASK_FRAGMENT = gql`
         complete
         total
       }
-      comments {
-        unread
-        total
-      }
     }
     taskGroup {
       id

frontend/src/shared/graphql/getProjects.graphqls

@@ -10,7 +10,6 @@ query getProjects {
   }
   projects {
     id
-    shortId
     name
     team {
       id

frontend/src/shared/graphql/labels.ts

@@ -1,26 +0,0 @@
-import gql from 'graphql-tag';
-import TASK_FRAGMENT from './fragments/task';
-
-const FIND_PROJECT_QUERY = gql`
-  query labels($projectID: UUID!) {
-    findProject(input: { projectID: $projectID }) {
-      labels {
-        id
-        createdDate
-        name
-        labelColor {
-          id
-          name
-          colorHex
-          position
-        }
-      }
-    }
-    labelColors {
-      id
-      position
-      colorHex
-      name
-    }
-  }
-`;

frontend/src/shared/graphql/myTasks.graphqls

@@ -6,15 +6,12 @@ query myTasks($status: MyTasksStatus!, $sort: MyTasksSort!) {
   myTasks(input: { status: $status, sort: $sort }) {
     tasks {
       id
-      shortId
       taskGroup {
         id
         name
       }
       name
-      dueDate {
-        at
-      }
+      dueDate
       hasTime
       complete
       completedAt

frontend/src/shared/graphql/notificationToggleRead.ts

@@ -1,13 +0,0 @@
-import gql from 'graphql-tag';
-
-const CREATE_TASK_MUTATION = gql`
-  mutation notificationToggleRead($notifiedID: UUID!) {
-    notificationToggleRead(input: { notifiedID: $notifiedID }) {
-      id
-      read
-      readAt
-    }
-  }
-`;
-
-export default CREATE_TASK_MUTATION;

frontend/src/shared/graphql/notifications.ts

@@ -1,34 +0,0 @@
-import gql from 'graphql-tag';
-
-export const TOP_NAVBAR_QUERY = gql`
-  query notifications($limit: Int!, $cursor: String, $filter: NotificationFilter!) {
-    notified(input: { limit: $limit, cursor: $cursor, filter: $filter }) {
-      totalCount
-      pageInfo {
-        endCursor
-        hasNextPage
-      }
-      notified {
-        id
-        read
-        readAt
-        notification {
-          id
-          actionType
-          data {
-            key
-            value
-          }
-          causedBy {
-            username
-            fullname
-            id
-          }
-          createdAt
-        }
-      }
-    }
-  }
-`;
-
-export default TOP_NAVBAR_QUERY;

frontend/src/shared/graphql/notifictionMarkAllRead.ts

@@ -1,11 +0,0 @@
-import gql from 'graphql-tag';
-
-const CREATE_TASK_MUTATION = gql`
-  mutation notificationMarkAllRead {
-    notificationMarkAllRead {
-      success
-    }
-  }
-`;
-
-export default CREATE_TASK_MUTATION;

frontend/src/shared/graphql/onNotificationAdded.ts

@@ -1,26 +0,0 @@
-import gql from 'graphql-tag';
-import TASK_FRAGMENT from './fragments/task';
-
-const FIND_PROJECT_QUERY = gql`
-  subscription notificationAdded {
-    notificationAdded {
-      id
-      read
-      readAt
-      notification {
-        id
-        actionType
-        data {
-          key
-          value
-        }
-        causedBy {
-          username
-          fullname
-          id
-        }
-        createdAt
-      }
-    }
-  }
-`;

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

@@ -1,12 +0,0 @@
-import gql from 'graphql-tag';
-
-const CREATE_TASK_MUTATION = gql`
-  mutation toggleTaskWatch($taskID: UUID!) {
-    toggleTaskWatch(input: { taskID: $taskID }) {
-      id
-      watched
-    }
-  }
-`;
-
-export default CREATE_TASK_MUTATION;

frontend/src/shared/graphql/topNavbar.ts

@@ -3,19 +3,20 @@ import gql from 'graphql-tag';
 export const TOP_NAVBAR_QUERY = gql`
   query topNavbar {
     notifications {
-      id
-      read
-      readAt
-      notification {
-        id
-        actionType
-        causedBy {
-          username
-          fullname
-          id
-        }
       createdAt
+      read
+      id
+      entity {
+        id
+        type
+        name
       }
+      actor {
+        id
+        type
+        name
+      }
+      actionType
     }
     me {
       user {

frontend/src/shared/graphql/unreadNotifications.ts

@@ -1,11 +0,0 @@
-import gql from 'graphql-tag';
-
-export const TOP_NAVBAR_QUERY = gql`
-  query hasUnreadNotifications {
-    hasUnreadNotifications {
-      unread
-    }
-  }
-`;
-
-export default TOP_NAVBAR_QUERY;

frontend/src/shared/graphql/updateTaskDueDate.graphqls

@@ -1,8 +1,4 @@
-mutation updateTaskDueDate($taskID: UUID!, $dueDate: Time, $hasTime: Boolean!,
-$createNotifications: [CreateTaskDueDateNotification!]!,
-$updateNotifications: [UpdateTaskDueDateNotification!]!
-$deleteNotifications: [DeleteTaskDueDateNotification!]!
-) {
+mutation updateTaskDueDate($taskID: UUID!, $dueDate: Time, $hasTime: Boolean!) {
   updateTaskDueDate (
     input: {
       taskID: $taskID
@@ -11,26 +7,7 @@ $deleteNotifications: [DeleteTaskDueDateNotification!]!
     }
   ) {
     id
-    dueDate {
-      at
-    }
+    dueDate
     hasTime
   }
-  createTaskDueDateNotifications(input: $createNotifications) {
-    notifications {
-      id
-      period
-      duration
-    }
-  }
-  updateTaskDueDateNotifications(input: $updateNotifications) {
-    notifications {
-      id
-      period
-      duration
-    }
-  }
-  deleteTaskDueDateNotifications(input: $deleteNotifications) {
-    notifications
-  }
 }

frontend/src/shared/hooks/useStateWithLocalStorage.ts

@@ -1,13 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
-
-// A wrapper for "JSON.parse()"" to support "undefined" value
-function parseJSON<T>(value: string | null): T | undefined {
-  try {
-    return value === 'undefined' ? undefined : JSON.parse(value ?? '');
-  } catch (error) {
-    return undefined;
-  }
-}
+import React from 'react';
 
 const useStateWithLocalStorage = (localStorageKey: string): [string, React.Dispatch<React.SetStateAction<string>>] => {
   const [value, setValue] = React.useState<string>(localStorage.getItem(localStorageKey) || '');
@@ -20,78 +11,3 @@ const useStateWithLocalStorage = (localStorageKey: string): [string, React.Dispa
 };
 
 export default useStateWithLocalStorage;
-
-type SetValue<T> = Dispatch<SetStateAction<T>>;
-
-function useLocalStorage<T>(key: string, initialValue: T): [T, SetValue<T>] {
-  // Get from local storage then
-  // parse stored json or return initialValue
-  const readValue = (): T => {
-    // Prevent build error "window is undefined" but keep keep working
-    if (typeof window === 'undefined') {
-      return initialValue;
-    }
-
-    try {
-      const item = window.localStorage.getItem(key);
-      return item ? (parseJSON(item) as T) : initialValue;
-    } catch (error) {
-      console.warn(`Error reading localStorage key “${key}”:`, error);
-      return initialValue;
-    }
-  };
-
-  // State to store our value
-  // Pass initial state function to useState so logic is only executed once
-  const [storedValue, setStoredValue] = useState<T>(readValue);
-
-  // Return a wrapped version of useState's setter function that ...
-  // ... persists the new value to localStorage.
-  const setValue: SetValue<T> = (value) => {
-    // Prevent build error "window is undefined" but keeps working
-    if (typeof window === 'undefined') {
-      console.warn(`Tried setting localStorage key “${key}” even though environment is not a client`);
-    }
-
-    try {
-      // Allow value to be a function so we have the same API as useState
-      const newValue = value instanceof Function ? value(storedValue) : value;
-
-      // Save to local storage
-      window.localStorage.setItem(key, JSON.stringify(newValue));
-
-      // Save state
-      setStoredValue(newValue);
-
-      // We dispatch a custom event so every useLocalStorage hook are notified
-      window.dispatchEvent(new Event('local-storage'));
-    } catch (error) {
-      console.warn(`Error setting localStorage key “${key}”:`, error);
-    }
-  };
-
-  useEffect(() => {
-    setStoredValue(readValue());
-  }, []);
-
-  useEffect(() => {
-    const handleStorageChange = () => {
-      setStoredValue(readValue());
-    };
-
-    // this only works for other documents, not the current one
-    window.addEventListener('storage', handleStorageChange);
-
-    // this is a custom event, triggered in writeValueToLocalStorage
-    window.addEventListener('local-storage', handleStorageChange);
-
-    return () => {
-      window.removeEventListener('storage', handleStorageChange);
-      window.removeEventListener('local-storage', handleStorageChange);
-    };
-  }, []);
-
-  return [storedValue, setValue];
-}
-
-export { useLocalStorage };

frontend/src/shared/icons/AngleLeft.tsx

@@ -16,4 +16,9 @@ const AngleLeft = ({ size, color }: Props) => {
   );
 };
 
+AngleLeft.defaultProps = {
+  size: 16,
+  color: '#000',
+};
+
 export default AngleLeft;

frontend/src/shared/icons/ArrowLeft.tsx

@@ -17,4 +17,10 @@ const ArrowLeft = ({ width, height, color }: Props) => {
   );
 };
 
+ArrowLeft.defaultProps = {
+  width: 16,
+  height: 16,
+  color: '#000',
+};
+
 export default ArrowLeft;

frontend/src/shared/icons/Bell.tsx

@@ -1,12 +1,21 @@
 import React from 'react';
-import Icon, { IconProps } from './Icon';
 
-const Bell: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+type Props = {
+  size: number | string;
+  color: string;
+};
+
+const Bell = ({ size, color }: Props) => {
   return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 448 512">
-      <path d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z" />
-    </Icon>
+    <svg fill={color} xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 448 512">
+      <path d="M439.39 362.29c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71zM67.53 368c21.22-27.97 44.42-74.33 44.53-159.42 0-.2-.06-.38-.06-.58 0-61.86 50.14-112 112-112s112 50.14 112 112c0 .2-.06.38-.06.58.11 85.1 23.31 131.46 44.53 159.42H67.53zM224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64z" />
+    </svg>
   );
 };
 
+Bell.defaultProps = {
+  size: 16,
+  color: '#000',
+};
+
 export default Bell;

frontend/src/shared/icons/Bin.tsx

@@ -14,4 +14,9 @@ const Bin = ({ size, color }: Props) => {
   );
 };
 
+Bin.defaultProps = {
+  size: 16,
+  color: '#000',
+};
+
 export default Bin;

frontend/src/shared/icons/Bubble.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const Bubble: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 576 512">
-      <path d="M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z" />
-    </Icon>
-  );
-};
-
-export default Bubble;

frontend/src/shared/icons/Circle.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const Circle: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
-      <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" />
-    </Icon>
-  );
-};
-
-export default Circle;

frontend/src/shared/icons/CircleSolid.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const CircleSolid: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
-      <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" />
-    </Icon>
-  );
-};
-
-export default CircleSolid;

frontend/src/shared/icons/Cog.tsx

@@ -16,4 +16,9 @@ const Cog = ({ size, color }: Props) => {
   );
 };
 
+Cog.defaultProps = {
+  size: 16,
+  color: '#000',
+};
+
 export default Cog;

frontend/src/shared/icons/Ellipsis.tsx

@@ -21,4 +21,10 @@ const Ellipsis = ({ size, color, vertical }: Props) => {
   );
 };
 
+Ellipsis.defaultProps = {
+  size: 16,
+  color: '#000',
+  vertical: false,
+};
+
 export default Ellipsis;

frontend/src/shared/icons/Exit.tsx

@@ -13,4 +13,9 @@ const Exit = ({ size, color }: Props) => {
   );
 };
 
+Exit.defaultProps = {
+  size: 16,
+  color: '#000',
+};
+
 export default Exit;

frontend/src/shared/icons/Question.tsx

@@ -13,4 +13,9 @@ const Question = ({ size, color }: Props) => {
   );
 };
 
+Question.defaultProps = {
+  size: 16,
+  color: '#000',
+};
+
 export default Question;

frontend/src/shared/icons/Stack.tsx

@@ -13,4 +13,9 @@ const Stack = ({ size, color }: Props) => {
   );
 };
 
+Stack.defaultProps = {
+  size: 16,
+  color: '#000',
+};
+
 export default Stack;

frontend/src/shared/icons/Star.tsx

@@ -25,4 +25,11 @@ const Star = ({ width, height, color, filled }: Props) => {
   );
 };
 
+Star.defaultProps = {
+  width: 24,
+  height: 16,
+  color: '#000',
+  filled: false,
+};
+
 export default Star;

frontend/src/shared/icons/UserCircle.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const UserCircle: React.FC<IconProps> = ({ width = '16px', height = '16px', className, onClick }) => {
-  return (
-    <Icon onClick={onClick} width={width} height={height} className={className} viewBox="0 0 496 512">
-      <path d="M248 104c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96zm0 144c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm0-240C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-49.7 0-95.1-18.3-130.1-48.4 14.9-23 40.4-38.6 69.6-39.5 20.8 6.4 40.6 9.6 60.5 9.6s39.7-3.1 60.5-9.6c29.2 1 54.7 16.5 69.6 39.5-35 30.1-80.4 48.4-130.1 48.4zm162.7-84.1c-24.4-31.4-62.1-51.9-105.1-51.9-10.2 0-26 9.6-57.6 9.6-31.5 0-47.4-9.6-57.6-9.6-42.9 0-80.6 20.5-105.1 51.9C61.9 339.2 48 299.2 48 256c0-110.3 89.7-200 200-200s200 89.7 200 200c0 43.2-13.9 83.2-37.3 115.9z" />
-    </Icon>
-  );
-};
-
-export default UserCircle;

frontend/src/shared/icons/Users.tsx

@@ -14,4 +14,9 @@ const Users = ({ size, color }: Props) => {
   );
 };
 
+Users.defaultProps = {
+  size: 16,
+  color: '#000',
+};
+
 export default Users;

frontend/src/shared/icons/index.ts

@@ -1,10 +1,6 @@
 import Cross from './Cross';
 import Cog from './Cog';
 import Cogs from './Cogs';
-import Circle from './Circle';
-import CircleSolid from './CircleSolid';
-import UserCircle from './UserCircle';
-import Bubble from './Bubble';
 import ArrowDown from './ArrowDown';
 import CheckCircleOutline from './CheckCircleOutline';
 import Briefcase from './Briefcase';
@@ -114,9 +110,5 @@ export {
   Briefcase,
   DotCircle,
   ChevronRight,
-  Circle,
-  CircleSolid,
-  Bubble,
-  UserCircle,
   Cogs,
 };

frontend/src/shared/utils/cache.ts

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

frontend/src/shared/utils/editorTheme.ts

@@ -45,56 +45,6 @@ export const base = {
   codeInserted: '#202746',
   codeImportant: '#c94922',
 
-  blockToolbarBackground: colors.bgPrimary,
-  blockToolbarTrigger: colors.primary,
-  blockToolbarTriggerIcon: colors.white,
-  blockToolbarItem: colors.white,
-  blockToolbarText: colors.white,
-  blockToolbarHoverBackground: colors.primary,
-  blockToolbarDivider: colors.almostWhite,
-  blockToolbarIcon: undefined,
-  blockToolbarIconSelected: colors.white,
-  blockToolbarTextSelected: colors.white,
-  blockToolbarSelectedBackground: colors.greyMid,
-
-  noticeInfoBackground: '#F5BE31',
-  noticeInfoText: colors.almostBlack,
-  noticeTipBackground: '#9E5CF7',
-  noticeTipText: colors.white,
-  noticeWarningBackground: '#FF5C80',
-  noticeWarningText: colors.white,
-};
-
-export const BASE_TWO = {
-  ...colors,
-  fontFamily:
-    "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
-  fontFamilyMono: "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
-  fontWeight: 400,
-  zIndex: 1000000,
-  link: colors.primary,
-  placeholder: '#B1BECC',
-  textSecondary: '#fff',
-  textLight: colors.white,
-  textHighlight: '#b3e7ff',
-  textHighlightForeground: colors.white,
-  selected: colors.primary,
-  codeComment: '#6a737d',
-  codePunctuation: '#5e6687',
-  codeNumber: '#d73a49',
-  codeProperty: '#c08b30',
-  codeTag: '#3d8fd1',
-  codeString: '#032f62',
-  codeSelector: '#6679cc',
-  codeAttr: '#c76b29',
-  codeEntity: '#22a2c9',
-  codeKeyword: '#d73a49',
-  codeFunction: '#6f42c1',
-  codeStatement: '#22a2c9',
-  codePlaceholder: '#3d8fd1',
-  codeInserted: '#202746',
-  codeImportant: '#c94922',
-
   blockToolbarBackground: colors.bgPrimary,
   blockToolbarTrigger: colors.white,
   blockToolbarTriggerIcon: colors.white,
@@ -103,10 +53,6 @@ export const BASE_TWO = {
   blockToolbarHoverBackground: colors.primary,
   blockToolbarDivider: colors.almostWhite,
 
-  blockToolbarIcon: undefined,
-  blockToolbarIconSelected: colors.black,
-  blockToolbarTextSelected: colors.black,
-
   noticeInfoBackground: '#F5BE31',
   noticeInfoText: colors.almostBlack,
   noticeTipBackground: '#9E5CF7',

frontend/src/shared/utils/localStorage.ts

@@ -1,5 +1,4 @@
 const localStorage = {
-  NOTIFICATIONS_FILTER: 'notifications_filter',
   CARD_LABEL_VARIANT_STORAGE_KEY: 'card_label_variant',
 };
 

frontend/src/shared/utils/polling.ts

@@ -8,7 +8,6 @@ const polling = {
   MEMBERS: resolve(3000),
   TEAM_PROJECTS: resolve(3000),
   TASK_DETAILS: resolve(3000),
-  UNREAD_NOTIFICATIONS: resolve(30000),
 };
 
 export default polling;

frontend/src/shared/utils/sorting.ts

@@ -46,7 +46,7 @@ export function sortTasks(a: Task, b: Task, taskSorting: TaskSorting) {
     if (b.dueDate && !a.dueDate) {
       return 1;
     }
-    return dayjs(a.dueDate.at).diff(dayjs(b.dueDate.at));
+    return dayjs(a.dueDate).diff(dayjs(b.dueDate));
   }
   if (taskSorting.type === TaskSortingType.COMPLETE) {
     if (a.complete && !b.complete) {

frontend/src/taskcafe.d.ts

@@ -1,5 +1,3 @@
-declare module 'loglevel-plugin-remote';
-
 interface JWTToken {
   userId: string;
   orgRole: string;
@@ -91,7 +89,7 @@ type ErrorOption =
 type SetFailedFn = () => void;
 type ConfirmProps = {
   hasConfirmToken: boolean;
-  hasFailed: boolean;
+  onConfirmUser: (setFailed: SetFailedFn) => void;
 };
 
 type RegisterProps = {

frontend/src/types.d.ts

@@ -59,13 +59,8 @@ type ChecklistBadge = {
   total: number;
 };
 
-type CommentsBadge = {
-  total: number;
-  unread: boolean;
-};
 type TaskBadges = {
   checklist?: ChecklistBadge | null;
-  comments?: CommentsBadge | null;
 };
 
 type TaskActivityData = {
@@ -103,14 +98,12 @@ type TaskComment = {
 
 type Task = {
   id: string;
-  shortId: string;
   taskGroup: InnerTaskGroup;
   name: string;
-  watched?: boolean;
   badges?: TaskBadges;
   position: number;
   hasTime?: boolean;
-  dueDate: { at?: string; notifications?: Array<{ id: string; period: number; duration: string }> };
+  dueDate?: string;
   complete?: boolean;
   completedAt?: string | null;
   labels: TaskLabel[];

go.mod

@@ -8,8 +8,6 @@ require (
 	github.com/brianvoe/gofakeit/v5 v5.11.2
 	github.com/go-chi/chi v3.3.2+incompatible
 	github.com/go-chi/cors v1.2.0
-	github.com/go-redis/redis v6.15.8+incompatible
-	github.com/go-redis/redis/v8 v8.0.0-beta.6
 	github.com/golang-migrate/migrate/v4 v4.11.0
 	github.com/google/uuid v1.1.1
 	github.com/jinzhu/now v1.1.1

gqlgen.yml

@@ -1,6 +1,6 @@
 # Where are all the schema files located? globs are supported eg  src/**/*.graphqls
 schema:
-  - internal/graph/schema/*.gql
+  - internal/graph/*.graphqls
 
 # Where should the generated server code go?
 exec:
@@ -22,8 +22,6 @@ resolver:
   layout: follow-schema
   dir: internal/graph
   package: graph
-  filename_template: "{name}.resolvers.go"
-
 
 # Optional: turn on to use []Thing instead of []*Thing
 omit_slice_element_pointers: true

internal/commands/commands.go

@@ -5,7 +5,6 @@ import (
 	"net/http"
 	"strings"
 
-	"github.com/jordanknott/taskcafe/internal/config"
 	"github.com/jordanknott/taskcafe/internal/utils"
 	"github.com/spf13/cobra"
 	"github.com/spf13/viper"
@@ -53,7 +52,6 @@ func initConfig() {
 	viper.SetEnvPrefix("TASKCAFE")
 	viper.SetEnvKeyReplacer(strings.NewReplacer(".", "_"))
 	viper.AutomaticEnv()
-	config.InitDefaults()
 
 	err := viper.ReadInConfig()
 	if err == nil {
@@ -63,11 +61,31 @@ func initConfig() {
 		panic(err)
 	}
 
+	viper.SetDefault("server.hostname", "0.0.0.0:3333")
+	viper.SetDefault("database.host", "127.0.0.1")
+	viper.SetDefault("database.name", "taskcafe")
+	viper.SetDefault("database.user", "taskcafe")
+	viper.SetDefault("database.password", "taskcafe_test")
+
+	viper.SetDefault("queue.broker", "amqp://guest:guest@localhost:5672/")
+	viper.SetDefault("queue.store", "memcache://localhost:11211")
+
 }
 
 // Execute the root cobra command
 func Execute() {
+	viper.SetDefault("server.hostname", "0.0.0.0:3333")
+	viper.SetDefault("database.host", "127.0.0.1")
+	viper.SetDefault("database.name", "taskcafe")
+	viper.SetDefault("database.user", "taskcafe")
+	viper.SetDefault("database.password", "taskcafe_test")
+	viper.SetDefault("database.port", "5432")
+	viper.SetDefault("security.token_expiration", "15m")
+
+	viper.SetDefault("queue.broker", "amqp://guest:guest@localhost:5672/")
+	viper.SetDefault("queue.store", "memcache://localhost:11211")
+
 	rootCmd.SetVersionTemplate(VersionTemplate())
-	rootCmd.AddCommand(newJobCmd(), newTokenCmd(), newWebCmd(), newMigrateCmd(), newWorkerCmd(), newResetPasswordCmd(), newSeedCmd())
+	rootCmd.AddCommand(newWebCmd(), newMigrateCmd(), newWorkerCmd(), newResetPasswordCmd(), newSeedCmd())
 	rootCmd.Execute()
 }

internal/commands/job.go

@@ -1,60 +0,0 @@
-package commands
-
-import (
-	"time"
-
-	"github.com/spf13/cobra"
-
-	"github.com/RichardKnop/machinery/v1"
-	mTasks "github.com/RichardKnop/machinery/v1/tasks"
-
-	queueLog "github.com/RichardKnop/machinery/v1/log"
-	"github.com/jmoiron/sqlx"
-	"github.com/jordanknott/taskcafe/internal/config"
-	"github.com/jordanknott/taskcafe/internal/jobs"
-	log "github.com/sirupsen/logrus"
-)
-
-func newJobCmd() *cobra.Command {
-	cc := &cobra.Command{
-		Use:   "job",
-		Short: "Run a task manually",
-		Long:  "Run a task manually",
-		RunE: func(cmd *cobra.Command, args []string) error {
-			Formatter := new(log.TextFormatter)
-			Formatter.TimestampFormat = "02-01-2006 15:04:05"
-			Formatter.FullTimestamp = true
-			log.SetFormatter(Formatter)
-			log.SetLevel(log.InfoLevel)
-
-			appConfig, err := config.GetAppConfig()
-			if err != nil {
-				log.Panic(err)
-			}
-			db, err := sqlx.Connect("postgres", config.GetDatabaseConfig().GetDatabaseConnectionUri())
-			if err != nil {
-				log.Panic(err)
-			}
-			db.SetMaxOpenConns(25)
-			db.SetMaxIdleConns(25)
-			db.SetConnMaxLifetime(5 * time.Minute)
-			defer db.Close()
-
-			log.Info("starting task queue server instance")
-			jobConfig := appConfig.Job.GetJobConfig()
-			server, err := machinery.NewServer(&jobConfig)
-			if err != nil {
-				// do something with the error
-			}
-			queueLog.Set(&jobs.MachineryLogger{})
-
-			signature := &mTasks.Signature{
-				Name: "scheduleDueDateNotifications",
-			}
-			server.SendTask(signature)
-
-			return nil
-		},
-	}
-	return cc
-}

internal/commands/reset_password.go

@@ -15,7 +15,7 @@ import (
 
 func newResetPasswordCmd() *cobra.Command {
 	return &cobra.Command{
-		Use:   "reset-password <username> <password>",
+		Use:   "reset-password",
 		Short: "Resets password of the specified user",
 		Long:  "If the user forgets its password you can reset it with this command.",
 		Args:  cobra.ExactArgs(2),

internal/commands/token.go

@@ -1,93 +0,0 @@
-package commands
-
-import (
-	"context"
-	"fmt"
-	"time"
-
-	"github.com/jordanknott/taskcafe/internal/config"
-	"github.com/jordanknott/taskcafe/internal/db"
-	"github.com/spf13/cobra"
-	"github.com/spf13/viper"
-
-	"github.com/jmoiron/sqlx"
-	log "github.com/sirupsen/logrus"
-)
-
-func newTokenCmd() *cobra.Command {
-	cc := &cobra.Command{
-		Use:   "token [username]",
-		Short: "Creates an access token for a user",
-		Long:  "Creates an access token for a user",
-		Args:  cobra.ExactArgs(1),
-		RunE: func(cmd *cobra.Command, args []string) error {
-			Formatter := new(log.TextFormatter)
-			Formatter.TimestampFormat = "02-01-2006 15:04:05"
-			Formatter.FullTimestamp = true
-			log.SetFormatter(Formatter)
-			log.SetLevel(log.InfoLevel)
-			appConfig, err := config.GetAppConfig()
-			if err != nil {
-				return err
-			}
-
-			var dbConnection *sqlx.DB
-			var retryDuration time.Duration
-			maxRetryNumber := 4
-			for i := 0; i < maxRetryNumber; i++ {
-				dbConnection, err = sqlx.Connect("postgres", appConfig.Database.GetDatabaseConnectionUri())
-				if err == nil {
-					break
-				}
-				retryDuration = time.Duration(i*2) * time.Second
-				log.WithFields(log.Fields{"retryNumber": i, "retryDuration": retryDuration}).WithError(err).Error("issue connecting to database, retrying")
-				if i != maxRetryNumber-1 {
-					time.Sleep(retryDuration)
-				}
-			}
-			if err != nil {
-				return err
-			}
-			dbConnection.SetMaxOpenConns(25)
-			dbConnection.SetMaxIdleConns(25)
-			dbConnection.SetConnMaxLifetime(5 * time.Minute)
-			defer dbConnection.Close()
-
-			if viper.GetBool("migrate") {
-				log.Info("running auto schema migrations")
-				if err = runMigration(dbConnection); err != nil {
-					return err
-				}
-			}
-
-			ctx := context.Background()
-			repository := db.NewRepository(dbConnection)
-			user, err := repository.GetUserAccountByUsername(ctx, args[0])
-			if err != nil {
-				return err
-			}
-
-			token, err := repository.CreateAuthToken(ctx, db.CreateAuthTokenParams{
-				UserID:    user.UserID,
-				CreatedAt: time.Now(),
-				ExpiresAt: time.Now().Add(time.Hour * 24 * 7),
-			})
-
-			if err != nil {
-				return err
-			}
-
-			fmt.Printf("Created token: %s\n", token.TokenID.String())
-			return nil
-		},
-	}
-
-	cc.Flags().Bool("migrate", false, "if true, auto run's schema migrations before starting the web server")
-	cc.Flags().IntVar(&teams, "teams", 5, "number of teams to generate")
-	cc.Flags().IntVar(&projects, "projects", 10, "number of projects to create per team (personal projects are included)")
-	cc.Flags().IntVar(&taskGroups, "task_groups", 5, "number of task groups to generate per project")
-	cc.Flags().IntVar(&tasks, "tasks", 25, "number of tasks to generate per task group")
-
-	viper.SetDefault("migrate", false)
-	return cc
-}

internal/commands/web.go

@@ -1,20 +1,21 @@
 package commands
 
 import (
+	"fmt"
 	"net/http"
+	"strings"
 	"time"
 
-	"github.com/RichardKnop/machinery/v1"
-	mTasks "github.com/RichardKnop/machinery/v1/tasks"
 	"github.com/golang-migrate/migrate/v4"
 	"github.com/golang-migrate/migrate/v4/database/postgres"
 	"github.com/golang-migrate/migrate/v4/source/httpfs"
+	"github.com/google/uuid"
 	"github.com/spf13/cobra"
 	"github.com/spf13/viper"
 
 	"github.com/jmoiron/sqlx"
-	"github.com/jordanknott/taskcafe/internal/config"
 	"github.com/jordanknott/taskcafe/internal/route"
+	"github.com/jordanknott/taskcafe/internal/utils"
 	log "github.com/sirupsen/logrus"
 )
 
@@ -32,19 +33,15 @@ func newWebCmd() *cobra.Command {
 			log.SetFormatter(Formatter)
 			log.SetLevel(log.InfoLevel)
 
-			appConfig, err := config.GetAppConfig()
-			if err != nil {
-				return err
-			}
-
-			redisClient, err := appConfig.MessageQueue.GetMessageQueueClient()
-			if err != nil {
-				return err
-			}
-			defer redisClient.Close()
-
-			connection := appConfig.Database.GetDatabaseConnectionUri()
+			connection := fmt.Sprintf("user=%s password=%s host=%s dbname=%s port=%s sslmode=disable",
+				viper.GetString("database.user"),
+				viper.GetString("database.password"),
+				viper.GetString("database.host"),
+				viper.GetString("database.name"),
+				viper.GetString("database.port"),
+			)
 			var db *sqlx.DB
+			var err error
 			var retryDuration time.Duration
 			maxRetryNumber := 4
 			for i := 0; i < maxRetryNumber; i++ {
@@ -73,26 +70,36 @@ func newWebCmd() *cobra.Command {
 				}
 			}
 
-			var server *machinery.Server
-			jobConfig := appConfig.Job.GetJobConfig()
-			server, err = machinery.NewServer(&jobConfig)
-			if err != nil {
-				return err
+			secret := viper.GetString("server.secret")
+			if strings.TrimSpace(secret) == "" {
+				log.Warn("server.secret is not set, generating a random secret")
+				secret = uuid.New().String()
 			}
-			signature := &mTasks.Signature{
-				Name: "scheduleDueDateNotifications",
-			}
-			server.SendTask(signature)
-
-			r, _ := route.NewRouter(db, redisClient, server, appConfig)
+			security, err := utils.GetSecurityConfig(viper.GetString("security.token_expiration"), []byte(secret))
+			r, _ := route.NewRouter(db, utils.EmailConfig{
+				From:               viper.GetString("smtp.from"),
+				Host:               viper.GetString("smtp.host"),
+				Port:               viper.GetInt("smtp.port"),
+				Username:           viper.GetString("smtp.username"),
+				Password:           viper.GetString("smtp.password"),
+				InsecureSkipVerify: viper.GetBool("smtp.skip_verify"),
+			}, security)
 			log.WithFields(log.Fields{"url": viper.GetString("server.hostname")}).Info("starting server")
 			return http.ListenAndServe(viper.GetString("server.hostname"), r)
 		},
 	}
 
+	viper.SetDefault("smtp.from", "no-reply@example.com")
+	viper.SetDefault("smtp.host", "localhost")
+	viper.SetDefault("smtp.port", 587)
+	viper.SetDefault("smtp.username", "")
+	viper.SetDefault("smtp.password", "")
+	viper.SetDefault("smtp.skip_verify", false)
+
 	cc.Flags().Bool("migrate", false, "if true, auto run's schema migrations before starting the web server")
 
 	viper.BindPFlag("migrate", cc.Flags().Lookup("migrate"))
+
 	viper.SetDefault("migrate", false)
 	return cc
 }