From 13752055b7c17d5f5d9c0119d54fb65ff623b648 Mon Sep 17 00:00:00 2001
From: maapteh <maarten@oudenniel.nl>
Date: Mon, 12 Oct 2020 15:52:22 +0200
Subject: [PATCH] add some layout for demo :)

---
 example/chat/src/Room.js | 87 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 82 insertions(+), 5 deletions(-)

diff --git a/example/chat/src/Room.js b/example/chat/src/Room.js
index 7f9e58718fc..9c254ab6e1a 100644
--- a/example/chat/src/Room.js
+++ b/example/chat/src/Room.js
@@ -9,8 +9,80 @@ export const Chat = styled.div`
     max-width: 400px;
     max-height: 400px;
     border: 1px solid #ccc;
+    background-color: #babdc6;
     overflow-x: hidden;
     overflow-y: scroll;
+    position: relative;
+    font: 14px verdana;
+`;
+
+export const ChatContainer = styled.div`
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+`;
+
+export const Message = styled.div`
+    color: #000;
+    clear: both;
+    line-height: 120%;
+    padding: 8px;
+    position: relative;
+    margin: 8px 0;
+    max-width: 85%;
+    word-wrap: break-word;
+    z-index: 1;
+
+  &:after {
+    position: absolute;
+    content: "";
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+
+  span {
+    display: inline-block;
+    float: right;
+    padding: 0 0 0 7px;
+    position: relative;
+    bottom: -4px;
+  }
+
+}`;
+
+const MessageReceived = styled(Message)`
+    background: #fff;
+    border-radius: 0px 5px 5px 5px;
+    float: left;
+
+    &:after {
+        border-width: 0px 10px 10px 0;
+        border-color: transparent #fff transparent transparent;
+        top: 0;
+        left: -4px;
+    }
+
+    span {
+        display: block;
+        color: #bbb;
+        font-size: 10px;
+    }
+`;
+
+const MessageMine = styled(Message)`
+    background: #e1ffc7;
+    border-radius: 5px 0px 5px 5px;
+    float: right;
+
+    &:after {
+        border-width: 0px 0 10px 10px;
+        border-color: transparent transparent transparent #e1ffc7;
+        top: 0;
+        right: -4px;
+    }
 `;
 
 export const Room = ({ channel, name }) => {
@@ -75,11 +147,16 @@ export const Room = ({ channel, name }) => {
 
     return (<>
         <Chat>
-            {data.room.messages.map((msg) =>
-                <div key={msg.id}>
-                    {msg.createdBy}: {msg.text}
-                </div>
-            )}
+            <ChatContainer>
+                {data.room.messages.map((msg) =>
+                    msg.createdBy === name ? <MessageMine key={msg.id}>
+                        {msg.text}
+                    </MessageMine> : <MessageReceived key={msg.id}>
+                        <span>{msg.createdBy}</span>
+                        {msg.text}
+                    </MessageReceived>
+                )}
+            </ChatContainer>
             <div ref={messagesEndRef} />
         </Chat>