Rename tabs to Inbox, Contacts, Insights

front/src/pages/tasks/TaskList.tsx

@@ -1,50 +0,0 @@
-import styled from '@emotion/styled';
-import TaskListHeader from './TaskListHeader';
-import TaskListItem from './TaskListItem';
-
-const StyledList = styled.div`
-  display: flex;
-  width: 325px;
-  flex-direction: column;
-  border-right: 2px solid #eaecee;
-`;
-
-export type Task = {
-  id: number;
-  targetUser: string;
-  label: string;
-  time: string;
-  lastMessage: string;
-};
-
-function TaskList() {
-  const tasks: Task[] = [
-    {
-      id: 1,
-      targetUser: 'Sylvie Vartan',
-      label: 'Guest at #xxx property',
-      time: '3h',
-      lastMessage:
-        'I’m looking for my order but couldn’t find it. Could you help me find it. I don’t know where ...',
-    },
-    {
-      id: 2,
-      targetUser: 'Johnny Halliday',
-      label: 'Guest at #xxx property',
-      time: '4h',
-      lastMessage: 'Hello, this is Johnny',
-    },
-  ];
-  return (
-    <StyledList>
-      <>
-        <TaskListHeader />
-        {tasks.map((item) => (
-          <TaskListItem key={item.id} task={item} />
-        ))}
-      </>
-    </StyledList>
-  );
-}
-
-export default TaskList;

front/src/pages/tasks/TaskListHeader.tsx

@@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-
-const StyledHeader = styled.div`
-  display: flex;
-  font-weight: bold;
-  align-items: center;
-  padding: 16px 24px;
-  font-size: 18px;
-  letter-spacing: 1px;
-  border-bottom: 1px solid #eaecee;
-`;
-
-function TaskListHeader() {
-  return <StyledHeader>6 tasks waiting</StyledHeader>;
-}
-
-export default TaskListHeader;

front/src/pages/tasks/TaskListItem.tsx

@@ -1,98 +0,0 @@
-import styled from '@emotion/styled';
-import { Task } from './TaskList';
-
-type OwnProps = {
-  task: Task;
-};
-
-const StyledListItem = styled.button`
-  display: flex;
-  padding: 16px 24px;
-  flex-direction: column;
-  color: #2e3138;
-  border: 0;
-  border-bottom: 1px solid #eaecee;
-  cursor: pointer;
-  font-family: inherit;
-  text-align: inherit;
-  align-items: inherit;
-  background: #f1f3f5;
-`;
-
-const StyledHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-const StyledAvatarAndTitle = styled.div`
-  display: flex;
-`;
-
-const StyledAvatar = styled.div`
-  display: flex;
-  width: 40px;
-  height: 40px;
-  border-radius: 40px;
-  background: #52555b;
-  font-size: 20px;
-  color: white;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-`;
-
-const StyledTitle = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 8px;
-`;
-
-const StyledName = styled.div`
-  font-weight: bold;
-  font-size: 18px;
-  color: black;
-`;
-
-const StyledLabel = styled.div`
-  display: flex;
-  font-size: 14px;
-`;
-
-const StyledTime = styled.div`
-  display: flex;
-  justify-self: flex-end;
-  color: #7d8187;
-  font-size: 14px;
-`;
-
-const StyledContent = styled.div`
-  display: flex;
-  color: #52555b;
-  font-size: 14px;
-  margin-top: 8px;
-`;
-
-function TaskListItem({ task }: OwnProps) {
-  return (
-    <StyledListItem>
-      <StyledHeader>
-        <StyledAvatarAndTitle>
-          <StyledAvatar>
-            {task.targetUser
-              .split(' ')
-              .map((n) => n[0])
-              .join('')}
-          </StyledAvatar>
-          <StyledTitle>
-            <StyledName>{task.targetUser}</StyledName>
-            <StyledLabel>{task.label}</StyledLabel>
-          </StyledTitle>
-        </StyledAvatarAndTitle>
-        <StyledTime>{task.time}</StyledTime>
-      </StyledHeader>
-      <StyledContent>{task.lastMessage} </StyledContent>
-    </StyledListItem>
-  );
-}
-
-export default TaskListItem;

front/src/pages/tasks/Tasks.tsx

@@ -1,12 +0,0 @@
-import FullWidthContainer from '../../layout/containers/FullWidthContainer';
-import TaskList from './TaskList';
-
-function Tasks() {
-  return (
-    <FullWidthContainer>
-      <TaskList />
-    </FullWidthContainer>
-  );
-}
-
-export default Tasks;