Merge pull request #72 from beatriceo/scrollbar

changed chatroom css

app/assets/stylesheets/pages/_messages.scss

@@ -1,19 +1,27 @@
 .messages-container-container {
-  background-color: $light-gray;
+  background-color: $card-background;
   width: 100%;
   height: 100vh;
   position: relative;
+  margin-left: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   .chat {
     position: absolute;
-    bottom: 0px;
+    bottom: 100px;
+    width: 90%;
   }
 }
 
 #messages-container {
   overflow: scroll;
   overflow-x: hidden;
-  height: 95%;
-  padding: 10px;
+  height: 81%;
+  padding: 38px;
+  width: 90%;
+  border-radius: 15px;
+  background-color: $light-gray;
 }
 
 select:not([multiple]) {
@@ -33,6 +41,7 @@ select:not([multiple]) {
 .avatar-sm {
   width: 35px;
   height: 35px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5)
 }
 
 .messageDiv {
@@ -46,9 +55,9 @@ select:not([multiple]) {
     padding-bottom: 2px;
     padding-left: 8px;
     padding-right: 8px;
-    background-color: #d4d5d6;
+    background-color: #f9bab3;
     color: $navbar-background;
-    border-radius: 2px;
+    border-radius: 10px;
   }
 
   &.right {
@@ -64,3 +73,31 @@ select:not([multiple]) {
 .margin-left {
   margin-left: 10px;
 }
+
+.text-center {
+  text-align: center;
+}
+
+.hover-notice {
+  display: flex;
+  justify-content: center;
+}
+
+.input-transparent {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+.send-button {
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: gray;
+  &:focus {
+    box-shadow: none;
+  }
+}

app/javascript/packs/chatrooms.js

@@ -127,23 +127,23 @@ hangUpIcon.addEventListener('click', event => {
 //   })
 // })
 
-const originalBtn = document.getElementById('original-btn')
-originalBtn.addEventListener('click', event => {
-  originalBtn.classList.toggle('original')
-  const allMessages = document.querySelectorAll('.messageDiv:not(.right) > p')
+// const originalBtn = document.getElementById('original-btn')
+// originalBtn.addEventListener('click', event => {
+//   originalBtn.classList.toggle('original')
+//   const allMessages = document.querySelectorAll('.messageDiv:not(.right) > p')
 
-  if (originalBtn.classList.contains('original')) {
-    originalBtn.innerText = "Show Original"
-    allMessages.forEach(message => {
-      message.innerText = message.dataset.translated
-    })
-  } else {
-    originalBtn.innerText = "Show Translated"
-    allMessages.forEach(message => {
-      message.innerText = message.dataset.original
-    })
-  }
-})
+//   if (originalBtn.classList.contains('original')) {
+//     originalBtn.innerText = "Show Original"
+//     allMessages.forEach(message => {
+//       message.innerText = message.dataset.translated
+//     })
+//   } else {
+//     originalBtn.innerText = "Show Translated"
+//     allMessages.forEach(message => {
+//       message.innerText = message.dataset.original
+//     })
+//   }
+// })
 
 const sendBtn = document.getElementById('send-btn')
 sendBtn.addEventListener('click', event => {

app/views/chat_rooms/show.html.erb

@@ -20,6 +20,9 @@
     <div class="col-xs-12 col-sm-6 col-lg-4 no-padding">
       <div class="messages-container-container">
         <div id="messages-container">
+          <div class="hover-notice">
+            <span class="text-center"><small>Hover to see the original message</small></span>
+          </div>
         </div>
         <div class="chat">
           <div class="input-group">
@@ -28,16 +31,17 @@
                 <option value="<%= language.code %>"><%= language.name %></option>
               <% end %>
             </select>
+
             <form class="form-inline" id="chat-form">
               <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
-              <input type="text" class="form-control" name="chat-input" id="chat-input" value="">
+              <input type="text" class="form-control input-transparent" name="chat-input" id="chat-input" value="" placeholder="Type something...">
               <span class="input-group-btn">
-                <button class="btn btn-primary form-control" id="send-btn" type="submit" remote: true>Send</button>
-              </span>
-              <span class="input-group-btn">
-                <button class="btn btn-danger form-control" id="original-btn" type="submit" remote: true>Show Original</button>
+                <button class="form-control send-button" id="send-btn" type="submit" remote: true>
+                  <i class="fas fa-paper-plane"></i>
+                </button>
               </span>
             </form>
+
           </div>
         </div>
       </div>