admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

New Empty States (#3465)

Browse Source 
New empty states
---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Kanav Arora
2024-01-30 15:31:56 +05:30
committed by GitHub
parent 96bcddc056
commit b07d67c624
27 changed files with 315 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
View File

@ -7,40 +7,18 @@ import { useTasks } from '@/activities/tasks/hooks/useTasks';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { AddTaskButton } from './AddTaskButton';
import { TaskList } from './TaskList';
const StyledTaskGroupEmptyContainer = styled.div`
align-items: center;
align-self: stretch;
display: flex;
flex: 1 0 0;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
justify-content: center;
padding-bottom: ${({ theme }) => theme.spacing(16)};
padding-left: ${({ theme }) => theme.spacing(4)};
padding-right: ${({ theme }) => theme.spacing(4)};
padding-top: ${({ theme }) => theme.spacing(3)};
`;
const StyledEmptyTaskGroupTitle = styled.div`
color: ${({ theme }) => theme.font.color.secondary};
font-size: ${({ theme }) => theme.font.size.xxl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: ${({ theme }) => theme.text.lineHeight.md};
`;
const StyledEmptyTaskGroupSubTitle = styled.div`
color: ${({ theme }) => theme.font.color.extraLight};
font-size: ${({ theme }) => theme.font.size.xxl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: ${({ theme }) => theme.text.lineHeight.md};
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
@ -80,9 +58,14 @@ export const TaskGroups = ({
(activeTabId === 'done' && completedTasks?.length === 0)
) {
return (
<StyledTaskGroupEmptyContainer>
<StyledEmptyTaskGroupTitle>No task yet</StyledEmptyTaskGroupTitle>
<StyledEmptyTaskGroupSubTitle>Create one:</StyledEmptyTaskGroupSubTitle>
<StyledEmptyContainer>
<AnimatedPlaceholder type="noTask" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>No Task</StyledEmptyTitle>
<StyledEmptySubTitle>
There are no associated tasks with this record
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
<Button
Icon={IconPlus}
title="New task"
@ -94,7 +77,7 @@ export const TaskGroups = ({
})
}
/>
</StyledTaskGroupEmptyContainer>
</StyledEmptyContainer>
);
}