UI style and light/dark theme refinements

app/views/chat/components/member-list-item.pug

@@ -4,6 +4,7 @@ mixin renderChatMemberListItem (room, member, options)
     options = Object.assign({
       isHost: false,
       isGuest: false,
+      audioIndicatorActive: false,
     }, options);
 
     var isRoomOwner = room.owner._id.equals(member._id);
@@ -19,6 +20,11 @@ mixin renderChatMemberListItem (room, member, options)
         a(href=`/member/${member.username}`, uk-tooltip={ title: `Visit ${member.username}`}).uk-link-reset
           .member-display-name= member.displayName || member.username
           .member-username @#{member.username}
+
+      .uk-width-auto
+        div(data-member-id= member._id, class={ 'indicator-active': options.audioIndicatorActive }).member-audio-indicator
+          i.fas.fa-volume-off
+
       .uk-width-auto.chat-user-menu
         button(type="button").dtp-button-dropdown
           i.fas.fa-ellipsis-v

app/views/chat/room/view.pug

@@ -1,6 +1,9 @@
 extends ../../layout/main
 block vendorcss
+  if user && (user.ui.theme === 'chat-light')
     link(rel='stylesheet', href=`/highlight.js/styles/qtcreator-light.min.css?v=${pkg.version}`)
+  else
+    link(rel='stylesheet', href=`/highlight.js/styles/obsidian.min.css?v=${pkg.version}`)
 block view-content
 
   include ../components/message

app/views/link/timeline.pug

@@ -1,6 +1,9 @@
 extends ../layouts/main
-block viewcss
-  link(rel='stylesheet', href=`/highlight.js/styles/obsidian.css?v=${pkg.version}`)
+block vendorcss
+  if user && (user.ui.theme === 'chat-light')
+    link(rel='stylesheet', href=`/highlight.js/styles/qtcreator-light.min.css?v=${pkg.version}`)
+  else
+    link(rel='stylesheet', href=`/highlight.js/styles/obsidian.min.css?v=${pkg.version}`)
 block content
 
   include ../member/components/status

client/css/site/stage.less

@@ -154,12 +154,13 @@
               border-radius: 4px;
 
               .message-content {
+                line-height: 1.1em;
                 margin-bottom: 2px;
               }
 
               .message-timestamp {
-                border-top: solid 1px @stage-border-color;
                 font-size: 0.9em;
+                line-height: 1em;
                 color: @chat-message-timestamp-color;
               }
             }
@@ -209,12 +210,14 @@
       flex-shrink: 0;
 
       padding: @stage-panel-padding;
+      border-top: solid 1px @stage-border-color;
+
       background-color: @chat-input-panel-bgcolor;
       color: @chat-input-panel-color;
     }
   }
 
-  .member-list-entry {
+  .member-list-item {
     background-color: transparent;
     transition: background-color 0.25s;
     padding: 5px 2px 2px 0;
@@ -222,6 +225,7 @@
 
     & .member-audio-indicator {
       display: none;
+      margin-right: 5px;
     }
 
     &.entry-idle {
@@ -233,13 +237,16 @@
     }
 
     &.entry-audio-active {
+
       & .member-audio-indicator {
+        color: #00ff00;
         display: block;
       }
     }
 
     .member-profile-icon {
-      height: 1em;
+      width: auto;
+      height: 2em;
       margin-right: 5px;
     }
   }

client/css/site/uikit-theme.dtp-dark.less

@@ -130,21 +130,21 @@ a.uk-button.uk-button-default {
 @stage-live-member-bgcolor: #1a1a1a;
 @stage-live-member-color: #8a8a8a;
 
-@chat-sidebar-bgcolor: #1a1a1a;
+@chat-sidebar-bgcolor: #2d404d;
 @chat-sidebar-color: #e8e8e8;
 
-@chat-container-bgcolor: #a8a8a8;
-@chat-container-color: #1a1a1a;
+@chat-container-bgcolor: #1a1a1a;
+@chat-container-color: #e8e8e8;
 
 @chat-media-bgcolor: #4a4a4a;
 @chat-media-color: #e8e8e8;
 
-@chat-message-bgcolor: #e8e8e8;
-@chat-message-color: #1a1a1a;
+@chat-message-bgcolor: #2a2a2a;
+@chat-message-color: #e8e8e8;
 @chat-message-timestamp-color: #808080;
 
-@system-message-bgcolor: transparent;
-@system-message-color: #4a4a4a;
+@system-message-bgcolor: #3a3a3a;
+@system-message-color: #a8a8a8;
 
 @chat-input-panel-bgcolor: #1a1a1a;
 @chat-input-panel-color: #e8e8e8;

client/css/site/uikit-theme.dtp-light.less

@@ -14,7 +14,7 @@
 @checkout-button-text-color:                    #2a2a2a;
 
 @dtp-dropdown-button-bgcolor:                   none;
-@dtp-dropdown-button-color:                     #1a1a1a;
+@dtp-dropdown-button-color:                     #e8e8e8;
 
 @emoji-react-button-active-color:               #adc7a0;
 
@@ -41,18 +41,19 @@
 // Chat Stage
 //
 
-@stage-border-color: #8a8a8a;
+@stage-border-color: #686868;
+
+@stage-header-bgcolor: #585858;
+@stage-header-color: #e5e6b9;
 
-@stage-header-bgcolor: #2a2a2a;
-@stage-header-color: #e8e8e8;
 @stage-live-member-bgcolor: #1a1a1a;
 @stage-live-member-color: #8a8a8a;
 
-@chat-sidebar-bgcolor: #a8a8a8;
-@chat-sidebar-color: #1a1a1a;
+@chat-sidebar-bgcolor: #3f5768;
+@chat-sidebar-color: #e8e8e8;
 
-@chat-container-bgcolor: #a8a8a8;
-@chat-container-color: #1a1a1a;
+@chat-container-bgcolor: #ffffff;
+@chat-container-color: #2a2a2a;
 
 @chat-media-bgcolor: #4a4a4a;
 @chat-media-color: #e8e8e8;
@@ -61,8 +62,8 @@
 @chat-message-color: #1a1a1a;
 @chat-message-timestamp-color: #a8a8a8;
 
-@system-message-bgcolor: #1a1a1a;
-@system-message-color: #a8a8a8;
+@system-message-bgcolor: #686868;
+@system-message-color: #c8c8c8;
 
-@chat-input-panel-bgcolor: #a8a8a8;
+@chat-input-panel-bgcolor: #e8e8e8;
 @chat-input-panel-color: #1a1a1a;

client/js/chat-client.js

@@ -291,11 +291,24 @@ export class ChatApp extends DtpApp {
     systemMessage.classList.add('system-message');
     systemMessage.classList.add('no-select');
 
+    const grid = document.createElement('div');
+    grid.toggleAttribute('uk-grid', true);
+    grid.classList.add('uk-grid-small');
+    systemMessage.appendChild(grid);
+
+    let column = document.createElement('div');
+    column.classList.add('uk-width-expand');
+    grid.appendChild(column);
+
     const chatContent = document.createElement('div');
     chatContent.classList.add('message-content');
     chatContent.classList.add('uk-text-break');
     chatContent.innerHTML = message.content;
-    systemMessage.appendChild(chatContent);
+    column.appendChild(chatContent);
+
+    column = document.createElement('div');
+    column.classList.add('uk-width-expand');
+    grid.appendChild(column);
 
     const chatTimestamp = document.createElement('div');
     chatTimestamp.classList.add('message-timestamp');
@@ -304,7 +317,7 @@ export class ChatApp extends DtpApp {
     chatTimestamp.setAttribute('data-dtp-timestamp', message.created);
     chatTimestamp.setAttribute('data-dtp-timestamp-format', 'time');
     chatTimestamp.innerHTML = dayjs(message.created).format('h:mm:ss a');
-    systemMessage.appendChild(chatTimestamp);
+    column.appendChild(chatTimestamp);
 
     this.chat.messageList.appendChild(systemMessage);
     this.chat.messages.push(systemMessage);