chat styles + related improvements

src/components/chat/chat.style.js

@@ -0,0 +1,14 @@
+export default {
+  name: 'Chat',
+  selector: '.chat-message-list',
+  lazy: true,
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Avatar',
+    'ChatMessage'
+  ],
+  defaultRules: [
+  ]
+}

src/components/chat/chat.vue

@@ -26,7 +26,7 @@
           </div>
         </div>
         <div
-          class="message-list"
+          class="chat-message-list message-list"
           :style="{ height: scrollableContainerHeight }"
         >
           <template v-if="!errorLoadingChat">

src/components/chat_message/chat_message.scss

@@ -27,12 +27,6 @@
 
   .menu-icon {
     cursor: pointer;
-
-    &:hover,
-    .extra-button-popover.open & {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
   }
 
   .popover {
@@ -61,10 +55,12 @@
   }
 
   .status {
-    border-radius: $fallback--chatMessageRadius;
-    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
+    background-color: var(--background);
+    color: var(--text);
+    border-radius: var(--roundness);
     display: flex;
     padding: 0.75em;
+    border: 1px solid var(--border);
   }
 
   .created-at {
@@ -117,16 +113,6 @@
     align-content: end;
     justify-content: flex-end;
 
-    a {
-      color: var(--chatMessageOutgoingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageOutgoingText, $fallback--text);
-      background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
-      border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
-    }
-
     .chat-message-inner {
       align-items: flex-end;
     }
@@ -137,22 +123,6 @@
   }
 
   .incoming {
-    a {
-      color: var(--chatMessageIncomingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageIncomingText, $fallback--text);
-      background-color: var(--chatMessageIncomingBg, $fallback--bg);
-      border: 1px solid var(--chatMessageIncomingBorder, --border);
-    }
-
-    .created-at {
-      a {
-        color: var(--chatMessageIncomingText, $fallback--text);
-      }
-    }
-
     .chat-message-menu {
       left: 0.4rem;
     }

src/components/chat_message/chat_message.style.js

@@ -0,0 +1,30 @@
+export default {
+  name: 'ChatMessage',
+  selector: '.chat-message',
+  variants: {
+    outgoing: '.outgoing'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Border',
+    'Button',
+    'RichContent',
+    'Attachment',
+    'PollGraph'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg, 2',
+        backgroundNoCssColor: 'yes'
+      }
+    },
+    {
+      variant: 'outgoing',
+      directives: {
+        background: '--bg, 5'
+      }
+    }
+  ]
+}

src/components/notification/notification.style.js

@@ -13,11 +13,5 @@ export default {
     'Avatar',
     'Attachment'
   ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg'
-      }
-    }
-  ]
+  defaultRules: []
 }

src/components/panel.style.js

@@ -14,7 +14,8 @@ export default {
     'Post',
     'Notification',
     'Alert',
-    'UserCard'
+    'UserCard',
+    'Chat'
   ],
   defaultRules: [
     {

src/components/panel_header.style.js

@@ -8,7 +8,8 @@ export default {
     'Button',
     'ButtonUnstyled',
     'Badge',
-    'Alert'
+    'Alert',
+    'Avatar'
   ],
   defaultRules: [
     {

src/components/rich_content/rich_content.style.js

@@ -9,7 +9,6 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--bg',
         textNoCssColor: 'yes'
       }
     }

src/components/status/post.style.js

@@ -14,11 +14,5 @@ export default {
     'Attachment',
     'PollGraph'
   ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg'
-      }
-    }
-  ]
+  defaultRules: []
 }