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

@@ -2,16 +2,12 @@ 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

@@ -1,15 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

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

@@ -79,7 +79,7 @@ export const Wrapper = styled.div`
     }
   }
 
-  animation: 420s fade cubic-bezier(.6,.04,.98,.34);
+  animation: 160s 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

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

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

@@ -1,26 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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]};
-`;