Add Fediverse event chat views. Closes #2679

web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss

@@ -7,6 +7,7 @@
   height: 85px;
   width: 300px;
   overflow: hidden;
+  background-color: var(--theme-color-background-main);
 
   &:hover {
     border-color: var(--theme-text-link);
@@ -23,6 +24,7 @@
   .body {
     color: var(--theme-color-components-text-on-light);
     text-overflow: ellipsis;
+    line-height: 1.2rem;
   }
 
   .account {
@@ -37,8 +39,8 @@
     height: 25px;
     top: -20px;
     left: 40px;
-    border-color: white;
-    border-width: 1px;
+    border-color: var(--theme-color-background-main);
+    border-width: 2px;
     border-style: solid;
     border-radius: 50%;
     background-size: cover;

web/components/chat/ChatSocialMessage/ChatSocialMessage.stories.tsx

@@ -13,7 +13,7 @@ const Template: ComponentStory<typeof ChatSocialMessage> = args => <ChatSocialMe
 export const Follow = Template.bind({});
 Follow.args = {
   message: {
-    type: 'follow',
+    type: 'FEDIVERSE_ENGAGEMENT_FOLLOW',
     body: 'james followed this live stream.',
     title: 'james@mastodon.social',
     image: 'https://mastodon.social/avatars/original/missing.png',
@@ -24,7 +24,7 @@ Follow.args = {
 export const Like = Template.bind({});
 Like.args = {
   message: {
-    type: 'like',
+    type: 'FEDIVERSE_ENGAGEMENT_LIKE',
     body: 'james liked that this stream went live.',
     title: 'james@mastodon.social',
     image: 'https://mastodon.social/avatars/original/missing.png',
@@ -35,7 +35,7 @@ Like.args = {
 export const Repost = Template.bind({});
 Repost.args = {
   message: {
-    type: 'repost',
+    type: 'FEDIVERSE_ENGAGEMENT_REPOST',
     body: 'james shared this stream with their followers.',
     title: 'james@mastodon.social',
     image: 'https://mastodon.social/avatars/original/missing.png',

web/components/chat/ChatSocialMessage/ChatSocialMessage.tsx

@@ -25,13 +25,13 @@ export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
   let Icon;
 
   switch (type.toString()) {
-    case 'follow':
+    case 'FEDIVERSE_ENGAGEMENT_FOLLOW':
       Icon = FollowIcon;
       break;
-    case 'like':
+    case 'FEDIVERSE_ENGAGEMENT_LIKE':
       Icon = LikeIcon;
       break;
-    case 'repost':
+    case 'FEDIVERSE_ENGAGEMENT_REPOST':
       Icon = RepostIcon;
       break;
     default: