Make profile header section match the designs (#29163)

* Update styling to match design

* Fix tests

src/components/views/right_panel/UserInfo.tsx

@@ -85,6 +85,7 @@ import { asyncSome } from "../../../utils/arrays";
 import { Flex } from "../../utils/Flex";
 import CopyableText from "../elements/CopyableText";
 import { useUserTimezone } from "../../../hooks/useUserTimezone";
+
 export interface IDevice extends Device {
     ambiguous?: boolean;
 }
@@ -580,8 +581,10 @@ export const warnSelfDemote = async (isSpace: boolean): Promise<boolean> => {
 
 const Container: React.FC<{
     children: ReactNode;
-}> = ({ children }) => {
-    return <div className="mx_UserInfo_container">{children}</div>;
+    className?: string;
+}> = ({ children, className }) => {
+    const classes = classNames("mx_UserInfo_container", className);
+    return <div className={classes}>{children}</div>;
 };
 
 interface IPowerLevelsContent {
@@ -1707,10 +1710,10 @@ export const UserInfoHeader: React.FC<{
                 </div>
             </div>
 
-            <Container>
+            <Container className="mx_UserInfo_header">
                 <Flex direction="column" align="center" className="mx_UserInfo_profile">
                     <Heading size="sm" weight="semibold" as="h1" dir="auto">
-                        <Flex direction="row-reverse" align="center">
+                        <Flex className="mx_UserInfo_profile_name" direction="row-reverse" align="center">
                             {displayName}
                             {e2eIcon}
                         </Flex>
@@ -1718,11 +1721,11 @@ export const UserInfoHeader: React.FC<{
                     {presenceLabel}
                     {timezoneInfo && (
                         <Tooltip label={timezoneInfo?.timezone ?? ""}>
-                            <span className="mx_UserInfo_timezone">
+                            <Flex align="center" className="mx_UserInfo_timezone">
                                 <Text size="sm" weight="regular">
                                     {timezoneInfo?.friendly ?? ""}
                                 </Text>
-                            </span>
+                            </Flex>
                         </Tooltip>
                     )}
                     <Text size="sm" weight="semibold" className="mx_UserInfo_profile_mxid">