From 2bf510e0f267b95541956b61c8713fc1bb800350 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Mon, 29 Jul 2024 11:59:31 +0200
Subject: [PATCH] Fix activity log look and feel

---
 .../activity/ActivityLogCompanyCreated.tsx    | 15 ++++++++---
 .../activity/ActivityLogContactCreated.tsx    | 14 +++++++---
 .../ActivityLogContactNoteCreated.tsx         | 15 ++++++++---
 .../src/activity/ActivityLogDealCreated.tsx   | 13 +++++++---
 .../activity/ActivityLogDealNoteCreated.tsx   | 16 +++++++++---
 .../crm/src/activity/ActivityLogIterator.tsx  | 13 +++++++---
 examples/crm/src/activity/ActivityLogNote.tsx | 26 +++++++++++--------
 examples/crm/src/contacts/Avatar.tsx          | 11 ++++++--
 8 files changed, 88 insertions(+), 35 deletions(-)

diff --git a/examples/crm/src/activity/ActivityLogCompanyCreated.tsx b/examples/crm/src/activity/ActivityLogCompanyCreated.tsx
index 19026fefe9..0e44c5b3bb 100644
--- a/examples/crm/src/activity/ActivityLogCompanyCreated.tsx
+++ b/examples/crm/src/activity/ActivityLogCompanyCreated.tsx
@@ -1,7 +1,7 @@
 import ListItem from '@mui/material/ListItem';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { RecordContextProvider } from 'react-admin';
+import { Link, RecordContextProvider } from 'react-admin';
 import { CompanyAvatar } from '../companies/CompanyAvatar';
 import type { ActivityCompanyCreated } from '../types';
 import { ActivityLogDate } from './ActivityLogDate';
@@ -24,16 +24,23 @@ export function ActivityLogCompanyCreated({
                         width: '100%',
                     }}
                 >
-                    <CompanyAvatar />
+                    <CompanyAvatar width={20} height={20} />
                     <Typography
                         component="p"
                         sx={{
                             flexGrow: 1,
                         }}
                         variant="body2"
+                        color="text.secondary"
                     >
-                        <strong>{company.name}</strong> has been added to{' '}
-                        companies by {sale.first_name} {sale.last_name}
+                        {sale.first_name} {sale.last_name} added company{' '}
+                        <Link
+                            component={Link}
+                            to={`/companies/${company.id}/show`}
+                            variant="body2"
+                        >
+                            {company.name}
+                        </Link>
                     </Typography>
 
                     <ActivityLogDate date={company.created_at} />
diff --git a/examples/crm/src/activity/ActivityLogContactCreated.tsx b/examples/crm/src/activity/ActivityLogContactCreated.tsx
index d471be18ee..adcf596140 100644
--- a/examples/crm/src/activity/ActivityLogContactCreated.tsx
+++ b/examples/crm/src/activity/ActivityLogContactCreated.tsx
@@ -24,14 +24,16 @@ export function ActivityLogContactCreated({
                         width: '100%',
                     }}
                 >
-                    <Avatar />
+                    <Avatar width={20} height={20} />
                     <Typography
                         component="p"
                         sx={{
                             flexGrow: 1,
                         }}
                         variant="body2"
+                        color="text.secondary"
                     >
+                        {sale.first_name} {sale.last_name} added{' '}
                         <Link
                             component={Link}
                             to={`/contacts/${contact.id}/show`}
@@ -39,8 +41,14 @@ export function ActivityLogContactCreated({
                         >
                             {contact.first_name} {contact.last_name}
                         </Link>{' '}
-                        has been added to <strong>{company.name}</strong> by{' '}
-                        {sale.first_name} {sale.last_name}
+                        to{' '}
+                        <Link
+                            component={Link}
+                            to={`/companies/${contact.company_id}/show`}
+                            variant="body2"
+                        >
+                            {company.name}
+                        </Link>
                     </Typography>
 
                     <ActivityLogDate date={contact.first_seen} />
diff --git a/examples/crm/src/activity/ActivityLogContactNoteCreated.tsx b/examples/crm/src/activity/ActivityLogContactNoteCreated.tsx
index 29e6e9f2df..710abaea59 100644
--- a/examples/crm/src/activity/ActivityLogContactNoteCreated.tsx
+++ b/examples/crm/src/activity/ActivityLogContactNoteCreated.tsx
@@ -17,23 +17,30 @@ export function ActivityLogContactNoteCreated({
             <ActivityLogNote
                 header={
                     <>
-                        <Avatar />
+                        <Avatar width={20} height={20} />
                         <Typography
                             component="p"
                             sx={{
                                 flexGrow: 1,
                             }}
                             variant="body2"
+                            color="text.secondary"
                         >
-                            A note has been added to{' '}
+                            {sale.first_name} {sale.last_name} added note about{' '}
                             <Link
                                 to={`/contacts/${contact.id}/show`}
                                 variant="body2"
                             >
                                 {contact.first_name} {contact.last_name}
                             </Link>{' '}
-                            from <strong>{company.name}</strong> by{' '}
-                            {sale.first_name} {sale.last_name}
+                            from{' '}
+                            <Link
+                                component={Link}
+                                to={`/companies/${company.id}/show`}
+                                variant="body2"
+                            >
+                                {company.name}
+                            </Link>
                         </Typography>
 
                         <ActivityLogDate date={contactNote.date} />
diff --git a/examples/crm/src/activity/ActivityLogDealCreated.tsx b/examples/crm/src/activity/ActivityLogDealCreated.tsx
index 296d911144..2ba3a8936d 100644
--- a/examples/crm/src/activity/ActivityLogDealCreated.tsx
+++ b/examples/crm/src/activity/ActivityLogDealCreated.tsx
@@ -24,19 +24,26 @@ export function ActivityLogDealCreated({
                         width: '100%',
                     }}
                 >
-                    <CompanyAvatar />
+                    <CompanyAvatar width={20} height={20} />
                     <Typography
                         component="p"
                         sx={{
                             flexGrow: 1,
                         }}
                         variant="body2"
+                        color="text.secondary"
                     >
+                        {sale.first_name} {sale.last_name} added deal{' '}
                         <Link to={`/deals/${deal.id}/show`} variant="body2">
                             {deal.name}
                         </Link>{' '}
-                        has been added to <strong>{company.name}</strong> by{' '}
-                        {sale.first_name} {sale.last_name}
+                        to company{' '}
+                        <Link
+                            to={`/companies/${company.id}/show`}
+                            variant="body2"
+                        >
+                            {company.name}
+                        </Link>
                     </Typography>
 
                     <ActivityLogDate date={deal.created_at} />
diff --git a/examples/crm/src/activity/ActivityLogDealNoteCreated.tsx b/examples/crm/src/activity/ActivityLogDealNoteCreated.tsx
index aa17f41413..d81aea982a 100644
--- a/examples/crm/src/activity/ActivityLogDealNoteCreated.tsx
+++ b/examples/crm/src/activity/ActivityLogDealNoteCreated.tsx
@@ -17,20 +17,28 @@ export function ActivityLogDealNoteCreated({
             <ActivityLogNote
                 header={
                     <>
-                        <CompanyAvatar />
+                        <CompanyAvatar width={20} height={20} />
                         <Typography
                             component="p"
                             sx={{
                                 flexGrow: 1,
                             }}
                             variant="body2"
+                            color="text.secondary"
                         >
-                            A note has been added to{' '}
+                            {sale.first_name} {sale.last_name} added note about
+                            deal{' '}
                             <Link to={`/deals/${deal.id}/show`} variant="body2">
                                 {deal.name}
                             </Link>{' '}
-                            from <strong>{company.name}</strong> by{' '}
-                            {sale.first_name} {sale.last_name}
+                            at{' '}
+                            <Link
+                                component={Link}
+                                to={`/companies/${deal.company_id}/show`}
+                                variant="body2"
+                            >
+                                {company.name}
+                            </Link>
                         </Typography>
 
                         <ActivityLogDate date={dealNote.date} />
diff --git a/examples/crm/src/activity/ActivityLogIterator.tsx b/examples/crm/src/activity/ActivityLogIterator.tsx
index 5809509e4a..3728ec638e 100644
--- a/examples/crm/src/activity/ActivityLogIterator.tsx
+++ b/examples/crm/src/activity/ActivityLogIterator.tsx
@@ -1,4 +1,4 @@
-import { Button, List } from '@mui/material';
+import { Button, Divider, List } from '@mui/material';
 import { useState } from 'react';
 import {
     COMPANY_CREATED,
@@ -30,15 +30,20 @@ export function ActivityLogIterator({
     return (
         <List
             sx={{
+                '& .MuiListItem-root': {
+                    marginTop: 0,
+                    marginBottom: 2,
+                },
                 '& .MuiListItem-root:not(:first-child)': {
-                    borderTop: '1px solid #f0f0f0',
                     marginTop: 2,
-                    paddingTop: 3,
                 },
             }}
         >
             {filteredActivities.map(activity => (
-                <ActivityItem key={activity.id} activity={activity} />
+                <>
+                    <ActivityItem key={activity.id} activity={activity} />
+                    <Divider />
+                </>
             ))}
 
             {activitiesDisplayed < activities.length && (
diff --git a/examples/crm/src/activity/ActivityLogNote.tsx b/examples/crm/src/activity/ActivityLogNote.tsx
index 4190478e27..e76772aa0d 100644
--- a/examples/crm/src/activity/ActivityLogNote.tsx
+++ b/examples/crm/src/activity/ActivityLogNote.tsx
@@ -40,18 +40,22 @@ export function ActivityLogNote({
                 </Stack>
 
                 <Typography variant="body2">
-                    {slicedText && !seeMore ? `${slicedText}...` : text}
+                    {slicedText && !seeMore ? (
+                        <>
+                            {slicedText}
+                            ...{' '}
+                            <Link
+                                href="#"
+                                variant="body2"
+                                onClick={handleToggleSeeMore}
+                            >
+                                see more
+                            </Link>
+                        </>
+                    ) : (
+                        text
+                    )}
                 </Typography>
-
-                {slicedText && (
-                    <Link
-                        href="#"
-                        variant="body2"
-                        onClick={handleToggleSeeMore}
-                    >
-                        {seeMore ? 'See less' : 'See more'}
-                    </Link>
-                )}
             </Stack>
         </ListItem>
     );
diff --git a/examples/crm/src/contacts/Avatar.tsx b/examples/crm/src/contacts/Avatar.tsx
index 7b3a609c18..2abd9b6f76 100644
--- a/examples/crm/src/contacts/Avatar.tsx
+++ b/examples/crm/src/contacts/Avatar.tsx
@@ -3,12 +3,19 @@ import { useRecordContext } from 'react-admin';
 
 import { Contact } from '../types';
 
-export const Avatar = (props: { record?: Contact }) => {
+export const Avatar = (props: {
+    record?: Contact;
+    width?: number;
+    height?: number;
+}) => {
     const record = useRecordContext<Contact>(props);
     if (!record) return null;
 
     return (
-        <MuiAvatar src={record.avatar ?? undefined}>
+        <MuiAvatar
+            src={record.avatar ?? undefined}
+            sx={{ width: props.width, height: props.height }}
+        >
             {record.first_name.charAt(0)}
             {record.last_name.charAt(0)}
         </MuiAvatar>