ref(chat): move some colors to css variables

css/_chat.scss

 }
 
 .chat-header {
-    background-color: rgba(42, 58, 75, 0.9);
+    background-color: $chatHeaderBackgroundColor;
     height: 70px;
     position: relative;
     width: 100%;
 }
 
 #chat-input {
-    border-top: 1px solid #A4B8D1;
+    border-top: 1px solid $chatInputSeparatorColor;
     display: flex;
 
     * {
 }
 
 .chatmessage {
-    background-color: rgba(240, 243, 247, 0.15);
+    background-color: $chatRemoteMessageBackgroundColor;
     border-radius: 0px 6px 6px 6px;
     margin-top: 3px;
     color: white;
     position: relative;
 
     &.localuser {
-        background-color: rgba(26, 108, 180, 1);
+        background-color: $chatLocalMessageBackgroundColor;
         border-radius: 6px 0px 6px 6px;
     }
 

css/_variables.scss

 $modalTextColor: #333;
 
 /**
+ * Chat
+ */
+$chatHeaderBackgroundColor: rgba(42, 58, 75, 0.9);
+$chatInputSeparatorColor: #A4B8D1;
+$chatLocalMessageBackgroundColor: rgba(26, 108, 180, 1);
+$chatRemoteMessageBackgroundColor:  rgba(240, 243, 247, 0.15);
+$sidebarWidth: 375px;
+
+ /**
  * Misc.
  */
 $borderRadius: 4px;
 $defaultWatermarkLink: '../images/watermark.png';
-$sidebarWidth: 375px;
 $popoverMenuPadding: 13px;
 $happySoftwareBackground: transparent;
 $desktopAppDragBarHeight: 25px;