Improve composer visiblity (#8578)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/messages/DisambiguatedProfile.tsx

@@ -28,9 +28,14 @@ interface IProps {
     onClick?(): void;
     colored?: boolean;
     emphasizeDisplayName?: boolean;
+    as?: string;
 }
 
 export default class DisambiguatedProfile extends React.Component<IProps> {
+    public static defaultProps = {
+        as: "div",
+    };
+
     render() {
         const { fallbackName, member, colored, emphasizeDisplayName, onClick } = this.props;
         const rawDisplayName = member?.rawDisplayName || fallbackName;
@@ -57,13 +62,14 @@ export default class DisambiguatedProfile extends React.Component<IProps> {
             [colorClass]: true,
         });
 
-        return (
-            <div className="mx_DisambiguatedProfile" onClick={onClick}>
-                <span className={displayNameClasses} dir="auto">
-                    { rawDisplayName }
-                </span>
-                { mxidElement }
-            </div>
-        );
+        return React.createElement(this.props.as, {
+            className: "mx_DisambiguatedProfile",
+            onClick,
+        }, <>
+            <span className={displayNameClasses} dir="auto">
+                { rawDisplayName }
+            </span>
+            { mxidElement }
+        </>);
     }
 }

src/components/views/messages/SenderProfile.tsx

@@ -27,12 +27,17 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 interface IProps {
     mxEvent: MatrixEvent;
     onClick?(): void;
+    as?: string;
 }
 
 export default class SenderProfile extends React.PureComponent<IProps> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
 
+    public static defaultProps = {
+        as: "div",
+    };
+
     render() {
         const { mxEvent, onClick } = this.props;
         const msgtype = mxEvent.getContent().msgtype;
@@ -60,6 +65,7 @@ export default class SenderProfile extends React.PureComponent<IProps> {
                         member={member}
                         colored={true}
                         emphasizeDisplayName={true}
+                        as={this.props.as}
                     />
                 );
             } }