Implement new Read Receipt design (#8389)

* feat: introduce new alignment types for tooltip
* feat: introduce new hook for tooltips
* feat: allow using onFocus callback for RovingAccessibleButton
* feat: allow using custom class for ContextMenu
* feat: allow setting tab index for avatar
* refactor: move read receipts out of event tile
* feat: implement new read receipt design
* feat: update SentReceipt to match new read receipts as well

src/components/views/avatars/BaseAvatar.tsx

@@ -45,6 +45,7 @@ interface IProps {
     onClick?: React.MouseEventHandler;
     inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>;
     className?: string;
+    tabIndex?: number;
 }
 
 const calculateUrls = (url, urls, lowBandwidth) => {

src/components/views/avatars/MemberAvatar.tsx

@@ -43,6 +43,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
     title?: string;
     style?: any;
     forceHistorical?: boolean; // true to deny `feature_use_only_current_profiles` usage. Default false.
+    hideTitle?: boolean;
 }
 
 interface IState {
@@ -124,7 +125,7 @@ export default class MemberAvatar extends React.PureComponent<IProps, IState> {
             <BaseAvatar
                 {...otherProps}
                 name={this.state.name}
-                title={this.state.title}
+                title={this.props.hideTitle ? undefined : this.state.title}
                 idName={userId}
                 url={this.state.imageUrl}
                 onClick={onClick}