update

src/components/ComposeBar.tsx

@@ -24,6 +24,7 @@ const ComposeArea = styled.div`
 const Input = styled.input`
   flex: 1;
   border: none;
+  font-size: 16px;
   height: 30px;
   background: #eee;
   padding: 0 10px;

src/components/Message.tsx

@@ -29,9 +29,9 @@ const PreviewWrapper = styled.div`
   display: flex;
 `;
 
-const Message: React.FC<Props> = ({ message }) => {
+const Message: React.FC<Props> = ({ message, self }) => {
   return (
-    <Direction self={true}>
+    <Direction self={self}>
       {message.files && message.files.length > 0 && (
         <PreviewWrapper>
           {message.files.map((file, i) => (
@@ -40,7 +40,7 @@ const Message: React.FC<Props> = ({ message }) => {
         </PreviewWrapper>
       )}
       {message.text && (
-        <Wrapper self={true}>
+        <Wrapper self={self}>
           {message.text}
         </Wrapper>
       )}

src/containers/Connected.tsx

@@ -43,7 +43,7 @@ const Connected: React.FC<{}> = () => {
       <button onClick={reset}>Reset</button>
       <MessageList>
         {reverseMessages.map((message) => (message.content ? (
-          <Message message={message.content} />
+          <Message self={message.self} message={message.content} />
         ):(
           <div>Loading</div>
         )))}