Merge pull request 'Change colors and a few small styling things' (#6) from new-colors into master

Reviewed-on: om/chatcontrol-live-demo#6

chatapp.svg

@@ -9,6 +9,7 @@
      viewBox="0 0 300 600"
      onload="start_chat('Ven')"
      overflow="auto"
+     style="font-family: sans; border-radius: 10px;"
      >
 <defs>
   <symbol id="kaereste_foto" width="60" height="200">
@@ -100,7 +101,8 @@ function create_link_node(url) {
 /// *ChatMessages are owned by a Dialog.
 function TextChatMessage(message_text, is_myself) {
   let lines = split_text_into_lines(message_text, 28);
-  let bubble_color = (is_myself)? 'white': '#DDFF66';
+  let bubble_color = (is_myself)? '#0084FF': '#E4E6EB';
+  let text_color = (is_myself)? 'white': 'black';
   let container = document.getElementById('messages');
 
   // attributes
@@ -111,7 +113,7 @@ function TextChatMessage(message_text, is_myself) {
   this.draw = function(y_offset, y_shift) {
     let group = create_svg_node('g', {'transform': `translate(0, ${y_shift})`});
 
-    let x = (is_myself ? 190 : 110);
+    let x = (is_myself ? 195 : 105);
     let text = create_svg_node('text', {
       'x': `${x}%`,
       'font-size': `${line_height}px`,
@@ -125,7 +127,7 @@ function TextChatMessage(message_text, is_myself) {
       let tspan = create_svg_node('tspan', {
         'x': `${x}%`,
         'y': `${y + line_height}`, // important: y is lower text baseline
-        'fill': 'green',
+        'fill': text_color,
         'width': '5%'
       });
 
@@ -390,7 +392,7 @@ async function local_message_processing(will_be_flagged) {
   let text_element = document.getElementById('message_status');
   let indicator = text_element.childNodes[0];
   indicator.data = 'scanning for illegal content';
-  await wait(200);
+  await wait(800);
   if(will_be_flagged) {
     let box = document.getElementById('message_status_box');
     text_element.setAttribute('fill', 'red');
@@ -398,12 +400,12 @@ async function local_message_processing(will_be_flagged) {
     indicator.data = 'Reporting suspicious content';
     await wait(1000);
     text_element.setAttribute('fill', 'white');
-    box.setAttribute('fill', 'blue');
+    box.setAttribute('fill', '#FF7B00');
   }
   indicator.data = 'encrypting message';
-  await wait(250);
+  await wait(550);
   indicator.data = 'sending message';
-  await wait(100);
+  await wait(500);
   indicator.data = 'message was sent';
 }
 
@@ -515,20 +517,20 @@ async function dialog_nabopige() {
 
 <!-- [right] contact name view -->
 <g id="contact_name_box">
-  <rect x="300" y="0" width="300" height="50" fill="yellow" />
-  <polyline points="300,20 320,0 320,40" fill="blue" onclick="swipe_viewport()" />
-  <polyline points="560,20 600,20 580,0" fill="blue" onclick="scroll_up()" />
-  <polyline points="560,30 600,30 580,50" fill="blue" onclick="scroll_down()" />
+  <rect x="300" y="0" width="300" height="50" fill="#F5F5F5"/>
+  <polyline points="300,20 320,0 320,40" fill="#0084FF" onclick="swipe_viewport()" />
+  <polyline points="560,20 600,20 580,0" fill="#0084FF" onclick="scroll_up()" />
+  <polyline points="560,30 600,30 580,50" fill="#0084FF" onclick="scroll_down()" />
   <text x="350" y="30" id="contact_indicator">loading...</text>
 </g>
 
 <!-- [right] messages view -->
-<rect x="300" y="50" width="300" height="450" fill="aqua" />
+<rect x="300" y="50" width="300" height="450" fill="white" />
 <g id="messages"></g>
 
 <!-- [right] message status -->
-<rect id="message_status_box" x="300" y="500" fill="blue" width="300" height="50" />
-<text id="message_status" x="310" y="530" fill="white">status</text>
+<rect id="message_status_box" x="300" y="520" fill="#FF7B00" width="300" height="30" />
+<text id="message_status" x="310" y="540" fill="white">status</text>
 
 <!-- [right] text input -->
 <rect id="message_input_box" x="300" y="550" stroke="black" fill="white" width="250" height="50" />
@@ -537,9 +539,9 @@ async function dialog_nabopige() {
 <text id="message_submit_button" x="555" y="580" fill="black">SEND</text>
 
 <!-- [left] contact list -->
-<rect x="0" y="0" width="300" height="50" fill="yellow" />
+<rect x="0" y="0" width="300" height="50" fill="#E4E6EB" />
 <text x="60" y="30">Dine kontakter</text>
-<rect x="0" y="50" width="300" height="550" style="stroke: green; stroke-width: 10px" fill="aqua" />
+<rect x="0" y="50" width="300" height="550" style="stroke: green; stroke-width: 0px" fill="white" />
 
 <text x="15" y="75" onclick="start_chat('Ven')">Ven</text>
 <text x="15" y="100" onclick="start_chat('Mor')">Mor</text>