Make profile header section match the designs (#29163)

* Update styling to match design * Fix tests
element-hq · Feb 4, 2025 · 1ea1d38 · 1ea1d38
1 parent afa6f37
commit 1ea1d38
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 13 deletions.
diff --git a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png
diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_UserInfo_container {
-        padding: var(--cpd-space-4x) 0;
+        padding: var(--cpd-space-2x) 0 var(--cpd-space-4x);
         margin: 0 var(--cpd-space-4x);
 
         .mx_UserInfo_container_verifyButton {
@@ -65,7 +65,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_UserInfo_avatar {
-        margin: $spacing-24 $spacing-32 0 $spacing-32;
+        margin: var(--cpd-space-12x) var(--cpd-space-4x) 0 var(--cpd-space-4x);
 
         .mx_UserInfo_avatar_transition {
             max-width: 120px;
@@ -98,8 +98,18 @@ Please see LICENSE files in the repository root for full details.
         margin: 5px 0;
     }
 
+    .mx_UserInfo_header {
+        margin-bottom: var(--cpd-space-8x);
+        padding-bottom: 0;
+    }
+
     .mx_UserInfo_profile {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-1x);
+
         h1 {
+            margin: 0;
             font-size: $font-20px;
             line-height: $font-25px;
 
@@ -119,8 +129,45 @@ Please see LICENSE files in the repository root for full details.
             }
         }
 
+        .mx_UserInfo_profile_name {
+            height: 30px;
+        }
+
+        .mx_UserInfo_profile_mxid {
+            color: var(--cpd-color-text-secondary);
+            height: 28px;
+        }
+
         .mx_UserInfo_profileStatus {
-            margin: var(--cpd-space-1x) 0;
+            height: 20px;
+        }
+
+        .mx_UserInfo_timezone {
+            height: 20px;
+            margin: 0;
+            display: flex;
+            align-items: center;
+        }
+
+        /** Overrides for the copy to clipboard button **/
+        .mx_CopyableText {
+            align-items: center;
+        }
+
+        .mx_CopyableText_copyButton {
+            width: 28px;
+            height: 28px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: unset;
+            padding-left: var(--cpd-space-2x);
+        }
+
+        .mx_CopyableText_copyButton::before {
+            width: 20px;
+            height: 20px;
+            background-color: var(--cpd-color-icon-secondary-alpha);
         }
     }
 

diff --git a/src/components/views/right_panel/UserInfo.tsx b/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,22 +1710,22 @@ 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>
                     </Heading>
                     {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">

diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -142,7 +142,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         </div>
       </div>
       <div
-        class="mx_UserInfo_container"
+        class="mx_UserInfo_container mx_UserInfo_header"
       >
         <div
           class="mx_Flex mx_UserInfo_profile"
@@ -153,7 +153,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             dir="auto"
           >
             <div
-              class="mx_Flex"
+              class="mx_Flex mx_UserInfo_profile_name"
               style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
             >
               @user:example.com
@@ -456,7 +456,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         </div>
       </div>
       <div
-        class="mx_UserInfo_container"
+        class="mx_UserInfo_container mx_UserInfo_header"
       >
         <div
           class="mx_Flex mx_UserInfo_profile"
@@ -467,7 +467,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             dir="auto"
           >
             <div
-              class="mx_Flex"
+              class="mx_Flex mx_UserInfo_profile_name"
               style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
             >
               @user:example.com