New Empty States (#3465)

New empty states
---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/activities/files/components/Attachments.tsx

@@ -9,32 +9,13 @@ import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttac
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { IconPlus } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
-
-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;
-  height: 100%;
-`;
-
-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)};
-`;
+import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
+import {
+  StyledEmptyContainer,
+  StyledEmptySubTitle,
+  StyledEmptyTextContainer,
+  StyledEmptyTitle,
+} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
 
 const StyledAttachmentsContainer = styled.div`
   display: flex;
@@ -85,23 +66,26 @@ export const Attachments = ({
             onUploadFile={onUploadFile}
           />
         ) : (
-          <StyledTaskGroupEmptyContainer>
+          <StyledEmptyContainer>
+            <AnimatedPlaceholder type="noFile" />
+            <StyledEmptyTextContainer>
+              <StyledEmptyTitle>No Files</StyledEmptyTitle>
+              <StyledEmptySubTitle>
+                There are no associated files with this record.
+              </StyledEmptySubTitle>
+            </StyledEmptyTextContainer>
             <StyledFileInput
               ref={inputFileRef}
               onChange={handleFileChange}
               type="file"
             />
-            <StyledEmptyTaskGroupTitle>No files yet</StyledEmptyTaskGroupTitle>
-            <StyledEmptyTaskGroupSubTitle>
-              Upload one:
-            </StyledEmptyTaskGroupSubTitle>
             <Button
               Icon={IconPlus}
               title="Add file"
               variant="secondary"
               onClick={handleUploadFileClick}
             />
-          </StyledTaskGroupEmptyContainer>
+          </StyledEmptyContainer>
         )}
       </StyledDropZoneContainer>
     );

packages/twenty-front/src/modules/activities/notes/components/Notes.tsx

@@ -6,35 +6,13 @@ import { useNotes } from '@/activities/notes/hooks/useNotes';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { IconPlus } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
-
-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)};
-`;
+import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
+import {
+  StyledEmptyContainer,
+  StyledEmptySubTitle,
+  StyledEmptyTextContainer,
+  StyledEmptyTitle,
+} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
 
 const StyledNotesContainer = styled.div`
   display: flex;
@@ -55,9 +33,14 @@ export const Notes = ({
 
   if (notes?.length === 0) {
     return (
-      <StyledTaskGroupEmptyContainer>
-        <StyledEmptyTaskGroupTitle>No note yet</StyledEmptyTaskGroupTitle>
-        <StyledEmptyTaskGroupSubTitle>Create one:</StyledEmptyTaskGroupSubTitle>
+      <StyledEmptyContainer>
+        <AnimatedPlaceholder type="noNote" />
+        <StyledEmptyTextContainer>
+          <StyledEmptyTitle>No notes</StyledEmptyTitle>
+          <StyledEmptySubTitle>
+            There are no associated notes with this record.
+          </StyledEmptySubTitle>
+        </StyledEmptyTextContainer>
         <Button
           Icon={IconPlus}
           title="New note"
@@ -69,7 +52,7 @@ export const Notes = ({
             })
           }
         />
-      </StyledTaskGroupEmptyContainer>
+      </StyledEmptyContainer>
     );
   }
 

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

@@ -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>
     );
   }
 

packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx

@@ -4,6 +4,13 @@ import { ActivityCreateButton } from '@/activities/components/ActivityCreateButt
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { useTimelineActivities } from '@/activities/timeline/hooks/useTimelineActivities';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
+import {
+  StyledEmptyContainer,
+  StyledEmptySubTitle,
+  StyledEmptyTextContainer,
+  StyledEmptyTitle,
+} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { TimelineItemsContainer } from './TimelineItemsContainer';
@@ -20,31 +27,6 @@ const StyledMainContainer = styled.div`
   justify-content: center;
 `;
 
-const StyledTimelineEmptyContainer = 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;
-`;
-
-const StyledEmptyTimelineTitle = 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 StyledEmptyTimelineSubTitle = 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)};
-`;
-
 export const Timeline = ({
   targetableObject,
 }: {
@@ -67,9 +49,14 @@ export const Timeline = ({
 
   if (showEmptyState) {
     return (
-      <StyledTimelineEmptyContainer>
-        <StyledEmptyTimelineTitle>No activity yet</StyledEmptyTimelineTitle>
-        <StyledEmptyTimelineSubTitle>Create one:</StyledEmptyTimelineSubTitle>
+      <StyledEmptyContainer>
+        <AnimatedPlaceholder type="emptyTimeline" />
+        <StyledEmptyTextContainer>
+          <StyledEmptyTitle>Add your first Activity</StyledEmptyTitle>
+          <StyledEmptySubTitle>
+            There are no activities associated with this record.{' '}
+          </StyledEmptySubTitle>
+        </StyledEmptyTextContainer>
         <ActivityCreateButton
           onNoteClick={() =>
             openCreateActivity({
@@ -84,7 +71,7 @@ export const Timeline = ({
             })
           }
         />
-      </StyledTimelineEmptyContainer>
+      </StyledEmptyContainer>
     );
   }