New Empty States (#3465)

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

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

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