Add ready chat style

src/components/chat/indexChat.js

@@ -15,7 +15,34 @@ const IndexChat = ({ user }) => {
                     chat
             </div>
             <div className='chatBody'>
-                
+                <div className='lobbyMessage'>
+                    <form>
+                        <input placeholder='lobby / room name'/>
+                        <button type='submit'>Connect</button>
+                    </form>
+                </div>
+                <div className='listMessage'>
+                    <div className='rowMessage'>
+                        <div className="chatAvatar">
+                        </div>
+                        <div className='userMessage'>
+                            niesamowite naprwdę nie wierygodne
+                        </div>
+                    </div>
+                    <div className='rowMessage'>
+                        <div className="chatAvatar">
+                        </div>
+                        <div className='otherMessage'>
+                            xd
+                        </div>
+                    </div>
+                </div>
+                <div className='textMessage'>
+                    <form>
+                        <input placeholder='message'/>
+                        <button type='submit'>Send</button>
+                    </form>
+                </div>
             </div>
         </div>
     )

src/styles/indexChat.scss

@@ -1,5 +1,20 @@
 @import 'index';
 
+@mixin ChatMessageStyle {
+    padding-top: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 10px;
+
+    border-radius: 10px;
+
+    font-size: 13px;
+    
+    max-width: 190px;
+
+    font-family: Ubuntu;
+}
+
 @mixin ChatWindowStyle {
     position: fixed;
     height: 400px;
@@ -26,6 +41,74 @@
             transition-duration: 0.2s;
         }
     }
+    .chatBody {
+        width: 100%;
+        height: 100%;
+
+        .lobbyMessage {
+            width: 100%;
+            height: 50px;
+            border-top: 1px dashed;
+
+            input {
+                width: 50%;
+            }
+            button {
+                margin-left: 5%;
+                width: 40%;
+            }
+        }
+
+        .listMessage {
+            width: 100%;
+            height: 250px;
+            border-top: 1px dashed;
+            overflow-y: scroll;
+            overflow-x: hidden;
+
+            .rowMessage {
+                width: 100%;
+                min-height: 40px;
+                padding-top: 10px;
+                padding-bottom: 10px;
+                display: flex;
+
+                .chatAvatar {
+                    width: 40px;
+                    height: 40px;
+                    margin-right: 20px;
+                    margin-left: 20px;
+                    border-radius: 50px;
+                    background-color: rgba(117,82,29,1);
+                }
+
+                .userMessage {
+                    @include ChatMessageStyle;
+                    color: rgba(22,28,29,1);
+                    background-color: rgba(117,82,29,1);
+                }
+
+                .otherMessage {
+                    @include ChatMessageStyle;
+                    border: 1px solid;
+                }
+            }
+        }
+
+        .textMessage {
+            width: 100%;
+            height: 50px;
+            border-top: 1px dashed;
+
+            input {
+                width: 70%;
+            }
+            button {
+                margin-left: 5%;
+                width: 20%;
+            }
+        }
+    }
 }
 
 .chatWindowHide {

src/styles/indexForum.scss

@@ -6,7 +6,7 @@
 }
 
 .indexForum {
-  @include backgroundDefaultDivStyle
+  @include backgroundDefaultDivStyle;
 
   position: relative;
   z-index: 0;
@@ -48,8 +48,8 @@
   }
 
   .forumTitle {
-    @include forumDiv
+    @include forumDiv;
-    @include gapTopBetweenElements
+    @include gapTopBetweenElements;
     p {
       font-size: 50px;
       float: left;
@@ -75,7 +75,7 @@
   }
 
   .forumItemsList {
-    @include gapTopBetweenElements
+    @include gapTopBetweenElements;
 
     .forumListItem:last-child{
       border-bottom: 0px dashed;
@@ -88,7 +88,7 @@
       padding-left: 5%;
       padding-top: 15px;
 
-      @include gapBetweenItems
+      @include gapBetweenItems;
 
       p:first-child {
         font-size: 30px;
@@ -135,7 +135,7 @@
       transition-duration: 0.5s;
       display: flex;
 
-      @include gapBetweenItems
+      @include gapBetweenItems;
 
       &:last-child{
         border-bottom: 1px;
@@ -147,7 +147,7 @@
       padding: 50px;
       padding-bottom: 30px;
       text-align: center;
-      @include gapBetweenSections
+      @include gapBetweenSections;
 
       img {
         width: 200px;
@@ -166,7 +166,7 @@
 
       word-wrap: break-word;
 
-      @include gapBetweenSections
+      @include gapBetweenSections;
     }
     .commentRating {
       width: 15%;
@@ -181,13 +181,13 @@
     }
 
     .forumFormSubject {
-      @include forumDiv
+      @include forumDiv;
 
       height: auto;
       display: flex;
       transition-duration: 0.5s;
 
-      @include gapTopBetweenElements
+      @include gapTopBetweenElements;
       form {
         width: 100%;
       }
@@ -217,13 +217,13 @@
     }
 
     .forumFormComment {
-      @include forumDiv
+      @include forumDiv;
 
       height: auto;
       display: flex;
       transition-duration: 0.5s;
 
-      @include gapTopBetweenElements
+      @include gapTopBetweenElements;
       textarea {
         width: 100%;
         height: 200px;
@@ -239,7 +239,7 @@
     }
 
   .forumFoot {
-    @include forumDiv
+    @include forumDiv;
     button {
       float: right;
     }