Modify chat styling (#314)

app/assets/stylesheets/chat.scss

@@ -1,3 +1,5 @@
+@import 'variables';
+
 // High level class
 .chat {
   display: flex;
@@ -5,10 +7,7 @@
 }
 
 .chat__channels {
-  width: 125px;
-  border: 1px solid #c9c9c9;
-  border-right: none;
-  background: #ededed;
+  width: 276px;
   height: inherit;
 }
 
@@ -27,7 +26,8 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  border: 1px solid #c9c9c9;
+  border: 1px solid $outline-color;
+  box-shadow: $bold-shadow;
 }
 
 .activechatchannel__messages {
@@ -67,7 +67,7 @@
 }
 
 .activechatchannel__form {
-  border-top: 1px solid #c9c9c9;
+  border-top: 1px solid $outline-color;
   background: #ededed;
   width: 100%;
   height: 70px;
@@ -92,8 +92,7 @@
 }
 
 .chatchanneltab {
-  height: 30px;
-  width: 100%;
+  width: 95%;
   margin-bottom: 5px;
   border: none;
   border-left: 8px solid transparent;
@@ -102,16 +101,20 @@
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 500;
+  padding: 10px;
+  border: 1px solid transparent;
 }
 
 .chatchanneltab--active {
   background: white;
-  border-left: 8px solid black;
+  border: 1px solid $dark-purple;
+  box-shadow: 3px 3px 0px $dark-purple;
 }
 
 .chatchanneltab--inactive {
   &:hover {
-    background: #e3e3e3;
+    border: 1px solid $outline-color;
+    box-shadow: $bold-shadow;
   }
 }
 
@@ -169,19 +172,21 @@
 
 .messagecomposer__input {
   border-radius: 3px;
-  border: 1px solid #c9c9c9;
-  font-size: 13px;
+  border: 1px solid $outline-color;
+  font-size: 14px;
   margin: 10px;
-  padding: 6px;
+  padding: 5px;
   resize: none;
   flex-grow: 1;
 }
 
 .messagecomposer__submit {
   margin: 10px 10px 10px 0;
-  border: 1px solid black;
   border-radius: 3px;
-  background: #66e2d5;
-  font-weight: 500px;
-  width: 50px;
+  background: $dark-purple;
+  font-weight: 600px;
+  font-family: $helvetica-condensed;
+  width: 80px;
+  color: white;
+  font-size: 18px;
 }

app/assets/stylesheets/user-profile-header.scss

@@ -1,6 +1,6 @@
 @import 'variables';
 .user-profile-header{
-  padding:calc(1.8vw + 15px) 0px;
+  padding:calc(1.4vw + 8px) 0px;
   font-family: $helvetica;
   position:relative;
   overflow:hidden;
@@ -12,6 +12,9 @@
   @media screen and ( min-width: 950px ){
     max-width:98%;
   }
+  @media screen and ( min-width: 1240px ){
+    padding: 25px 0px 11px;
+  }
   &.tag-header{
     // padding-left:calc(2vw + 12px);
     h1{

app/views/pages/chat.html.erb

@@ -7,15 +7,14 @@
 
 <style>
   .inner-content {
-    height: 500px;
-    margin: 0px 50px;
-    margin-top: 150px;
-    margin-bottom: 150px;
-    max-width: 1250px;
+    height: calc(100vh - 115px);
+    margin: 100px auto;
+    width: 96%;
+    max-width: 1240px;
   }
 
   .live-chat {
-    height: 500px;
+    height: calc(100vh - 115px);
   }
 </style>
 

config/initializers/reserved_words.rb

@@ -30,6 +30,7 @@
   "report-abuse",
   "infiniteloop",
   "faq",
+  "chat",
   "one-of-us",
   "swagnets",
   "security",