Merge pull request #10485 from growilabs/imprv/173842-improve-design-and-add-new-icons

imprv: Add new icons and improve design

apps/app/src/client/components/RecentActivity/ActivityListItem.tsx

@@ -22,23 +22,23 @@ export const IconActivityTranslationMap: Record<
   SupportedActivityActionType,
   string
 > = {
-  [ActivityLogActions.ACTION_PAGE_CREATE]: '➕',
-  [ActivityLogActions.ACTION_PAGE_UPDATE]: '✏️',
-  [ActivityLogActions.ACTION_PAGE_DELETE]: '🗑️',
-  [ActivityLogActions.ACTION_PAGE_DELETE_COMPLETELY]: '❌',
-  [ActivityLogActions.ACTION_PAGE_RENAME]: '🏷️',
-  [ActivityLogActions.ACTION_PAGE_REVERT]: '⏪',
-  [ActivityLogActions.ACTION_PAGE_DUPLICATE]: '📄📄',
-  [ActivityLogActions.ACTION_PAGE_LIKE]: '❤️',
-  [ActivityLogActions.ACTION_COMMENT_CREATE]: '💬',
+  [ActivityLogActions.ACTION_PAGE_CREATE]: 'add_box',
+  [ActivityLogActions.ACTION_PAGE_UPDATE]: 'edit',
+  [ActivityLogActions.ACTION_PAGE_DELETE]: 'delete',
+  [ActivityLogActions.ACTION_PAGE_DELETE_COMPLETELY]: 'delete_forever',
+  [ActivityLogActions.ACTION_PAGE_RENAME]: 'label',
+  [ActivityLogActions.ACTION_PAGE_REVERT]: 'undo',
+  [ActivityLogActions.ACTION_PAGE_DUPLICATE]: 'content_copy',
+  [ActivityLogActions.ACTION_PAGE_LIKE]: 'favorite',
+  [ActivityLogActions.ACTION_COMMENT_CREATE]: 'comment',
 };
 
 const translateAction = (action: SupportedActivityActionType): string => {
-  return ActivityActionTranslationMap[action] || 'performed an unknown action';
+  return ActivityActionTranslationMap[action] || 'unknown_action';
 };
 
 const setIcon = (action: SupportedActivityActionType): string => {
-  return IconActivityTranslationMap[action] || 'performed an unknown action';
+  return IconActivityTranslationMap[action] || 'question_mark';
 };
 
 const calculateTimePassed = (date: Date): string => {
@@ -49,24 +49,18 @@ const calculateTimePassed = (date: Date): string => {
 
 
 export const ActivityListItem = ({ activity }: { activity: ActivityHasUserId }): JSX.Element => {
-  const username = activity.user?.username;
   const action = activity.action as SupportedActivityActionType;
 
   return (
     <div className="activity-row">
-      <p className="text-muted small mb-1">
-        {setIcon(action)}
+      <p className="mb-1">
+        <span className="material-symbols-outlined me-2">{setIcon(action)}</span>
 
-        <span className="text-gray-900 dark:text-white">
-          {username}
-        </span>
-
-        <strong className="text-gray-900 dark:text-white">
+        <span className="dark:text-white">
           {' '}{translateAction(action)}
-        </strong>
+        </span>
 
-        <span className="text-muted text-xs">
-          {' '}・{' '}
+        <span className="text-secondary small ms-3">
           {calculateTimePassed(activity.createdAt)}
         </span>
       </p>