Increase message timeout

src/components/chat-log/chat-log.jsx

@@ -2,12 +2,16 @@ import { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Message from './message';
 import Raid from './raid';
+import Subscription from './sub';
+import Follow from './follow';
 
 import { List, Spacer } from './chat-log.style';
 
 const elementMap = {
   Message,
   Raid,
+  Follow,
+  Subscription,
   null: Spacer,
 };
 

src/components/chat-log/follow/follow.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Root, Channel } from './follow.style';
+
+const Follow = ({
+  user_name,
+}) => (
+  <Root>
+    <span>Thank you</span>
+    <Channel>{user_name}</Channel>
+    <span>for the follow~</span>
+  </Root>
+);
+
+export default Follow;

src/components/chat-log/follow/follow.style.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { XTERM_COLORS } from '../../../index.style';
+
+export const Root = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-align: center;
+  justify-content: center;
+
+  background-color: ${XTERM_COLORS[255]};
+  padding: 8px;
+  gap: 1em;
+`;
+
+export const Channel = styled.span`
+  color: ${XTERM_COLORS[6]};
+`;

src/components/chat-log/follow/index.js

@@ -0,0 +1 @@
+export { default } from './follow';

src/components/chat-log/message/message.style.js

@@ -79,7 +79,7 @@ export const Wrapper = styled.div`
     }
   }
 
-  animation: 160s fade cubic-bezier(.6,.04,.98,.34);
+  animation: 420s fade cubic-bezier(.6,.04,.98,.34);
   animation-fill-mode: forwards;
 `;
 

src/components/chat-log/raid/raid.style.js

@@ -10,9 +10,9 @@ export const Root = styled.div`
 
   background-color: ${XTERM_COLORS[255]};
   padding: 8px;
+  gap: 1em;
 `;
 
 export const Channel = styled.span`
-  margin-right: 1em;
   color: ${XTERM_COLORS[6]};
 `;

src/components/chat-log/sub/index.js

@@ -0,0 +1 @@
+export { default } from './sub';

src/components/chat-log/sub/sub.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Root, Channel } from './sub.style';
+
+const Raid = ({
+  user_name, gifted_to,
+}) => {
+  if (gifted_to?.length) {
+    return (
+      <Root>
+        <Channel>{user_name}</Channel>
+        <span>just gifted {gifted_to.length} subscriptions!</span>
+      </Root>
+    );
+  }
+
+  return (
+    <Root>
+      <span>Thank you</span>
+      <Channel>{user_name}</Channel>
+      <span>for the subscription!</span>
+    </Root>
+  );
+};
+
+export default Raid;

src/components/chat-log/sub/sub.style.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { XTERM_COLORS } from '../../../index.style';
+
+export const Root = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-align: center;
+  justify-content: center;
+
+  background-color: ${XTERM_COLORS[255]};
+  padding: 8px;
+  gap: 1em;
+`;
+
+export const Channel = styled.span`
+  color: ${XTERM_COLORS[6]};
+`;