More component selectors for CSS overrides for #2193

web/components/chat/ChatSocialMessage/ChatSocialMessage.tsx

@@ -1,6 +1,7 @@
 import { Avatar, Col, Row } from 'antd';
 import dynamic from 'next/dynamic';
 import React, { FC } from 'react';
+import cn from 'classnames';
 import { ChatSocialMessage as ChatMessage } from '../../../interfaces/chat-social-message.model';
 import styles from './ChatSocialMessage.module.scss';
 
@@ -32,7 +33,7 @@ export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
   }
 
   return (
-    <div className={styles.follower}>
+    <div className={cn([styles.follower, 'chat-message_social'])}>
       <a href={link} target="_blank" rel="noreferrer">
         <Row wrap={false}>
           <Col span={6}>

web/components/chat/ChatSystemMessage/ChatSystemMessage.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-danger */
 import { Highlight } from 'react-highlighter-ts';
 import { FC } from 'react';
+import cn from 'classnames';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import styles from './ChatSystemMessage.module.scss';
 
@@ -16,7 +17,7 @@ export const ChatSystemMessage: FC<ChatSystemMessageProps> = ({
   },
   highlightString,
 }) => (
-  <div className={styles.chatSystemMessage}>
+  <div className={cn([styles.chatSystemMessage, 'chat-message_system'])}>
     <div className={styles.user}>
       <span className={styles.userName}>{displayName}</span>
     </div>

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -87,7 +87,13 @@ export const ChatUserMessage: FC<ChatUserMessageProps> = ({
   }, [message]);
 
   return (
-    <div className={cn(styles.messagePadding, sameUserAsLast && styles.messagePaddingCollapsed)}>
+    <div
+      className={cn(
+        styles.messagePadding,
+        sameUserAsLast && styles.messagePaddingCollapsed,
+        'chat-message_user',
+      )}
+    >
       <div
         className={cn(styles.root, {
           [styles.ownMessage]: sentBySelf,

web/components/ui/followers/SingleFollower/SingleFollower.tsx

@@ -1,5 +1,6 @@
 import { Avatar, Col, Row } from 'antd';
 import React, { FC } from 'react';
+import cn from 'classnames';
 import { Follower } from '../../../../interfaces/follower';
 import styles from './SingleFollower.module.scss';
 
@@ -8,7 +9,7 @@ export type SingleFollowerProps = {
 };
 
 export const SingleFollower: FC<SingleFollowerProps> = ({ follower }) => (
-  <div className={styles.follower}>
+  <div className={cn([styles.follower, 'followers-follower'])}>
     <a href={follower.link} target="_blank" rel="noreferrer">
       <Row wrap={false}>
         <Col span={6}>