Compound Typography pass regression fixes (#11189)

* Compound Typography pass regression fixes * updates to the room list sizing * fix subtitle clipping * revert display name to use medium variant
2024-11-15 20:54:59 +08:00 · 2023-07-04 17:54:28 +01:00 · 2023-07-04 17:54:28 +01:00 · 2a7780052e
commit 2a7780052e
parent 3ad9a8fe3b
32 changed files with 50 additions and 44 deletions
--- a/res/css/components/views/settings/shared/_SettingsSubsection.pcss
+++ b/res/css/components/views/settings/shared/_SettingsSubsection.pcss
@ -26,7 +26,6 @@ limitations under the License.
 .mx_SettingsSubsection_text {
    width: 100%;
    box-sizing: inherit;
-    font-size: $font-15px;
    color: $secondary-content;
 }

--- a/res/css/views/rooms/_RoomTile.pcss
+++ b/res/css/views/rooms/_RoomTile.pcss
@ -24,7 +24,7 @@ limitations under the License.
    contain: content; /* Not strict as it will break when resizing a sublist vertically */
    box-sizing: border-box;

-    font-size: $font-13px;
+    font-size: var(--cpd-font-size-body-sm);

    &.mx_RoomTile_selected,
    &:hover,
@ -60,7 +60,7 @@ limitations under the License.
            color: $secondary-content;
            display: flex;
            gap: $spacing-4;
-            line-height: $font-18px;
+            line-height: 1.2;
        }

        .mx_RoomTile_title,
@ -71,7 +71,8 @@ limitations under the License.
        }

        .mx_RoomTile_title {
-            font: var(--cpd-font-heading-sm-medium);
+            font: var(--cpd-font-body-md-regular);
+            line-height: 1;

            &.mx_RoomTile_titleHasUnreadEvents {
                font-weight: var(--cpd-font-weight-semibold);
@ -79,7 +80,8 @@ limitations under the License.
        }

        .mx_RoomTile_titleWithSubtitle {
-            margin-top: -3px; /* shift the title up a bit more */
+            margin-top: -2px; /* shift the title up a bit more */
+            margin-bottom: 1px;
        }
    }

--- a/res/css/views/settings/_NotificationSettings2.pcss
+++ b/res/css/views/settings/_NotificationSettings2.pcss
@ -69,7 +69,6 @@ limitations under the License.

            .mx_Tag {
                border-radius: 18px;
-                line-height: 2.4rem;
                padding: 6px 12px;
                background: $panel-actions;
                margin: 0;
--- a/res/css/views/settings/tabs/_SettingsSection.pcss
+++ b/res/css/views/settings/tabs/_SettingsSection.pcss
@ -17,7 +17,7 @@ limitations under the License.
 .mx_SettingsSection {
    --SettingsTab_section-margin-bottom-preferences-labs: 30px;
    --SettingsTab_heading_nth_child-margin-top: 30px;
-    --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
+    --SettingsTab_tooltip-max-width: 20px; /* So it fits in the space provided by the page */

    color: $primary-content;

--- a/src/components/views/dialogs/BaseDialog.tsx
+++ b/src/components/views/dialogs/BaseDialog.tsx
@ -174,8 +174,8 @@ export default class BaseDialog extends React.Component<IProps> {
                    >
                        {!!(this.props.title || headerImage) && (
                            <Heading
+                                size="3"
                                as="h2"
-                                size="4"
                                className={classNames("mx_Dialog_title", this.props.titleClass)}
                                id="mx_BaseDialog_title"
                            >
--- a/src/components/views/rooms/RoomTileSubtitle.tsx
+++ b/src/components/views/rooms/RoomTileSubtitle.tsx
@ -57,7 +57,7 @@ export const RoomTileSubtitle: React.FC<Props> = ({
            "mx_RoomTile_subtitle--thread-reply": messagePreview.isThreadReply,
        });

-        const icon = messagePreview.isThreadReply ? <ThreadIcon className="mx_Icon mx_Icon_16" /> : null;
+        const icon = messagePreview.isThreadReply ? <ThreadIcon className="mx_Icon mx_Icon_12" /> : null;

        return (
            <div className={className} id={messagePreviewId(roomId)} title={messagePreview.text}>
--- a/src/components/views/settings/shared/SettingsSection.tsx
+++ b/src/components/views/settings/shared/SettingsSection.tsx
@ -43,7 +43,13 @@ export interface SettingsSectionProps extends HTMLAttributes<HTMLDivElement> {
 */
 export const SettingsSection: React.FC<SettingsSectionProps> = ({ className, heading, children, ...rest }) => (
    <div {...rest} className={classnames("mx_SettingsSection", className)}>
-        {typeof heading === "string" ? <Heading size="2">{heading}</Heading> : <>{heading}</>}
+        {typeof heading === "string" ? (
+            <Heading as="h2" size="3">
+                {heading}
+            </Heading>
+        ) : (
+            <>{heading}</>
+        )}
        <div className="mx_SettingsSection_subSections">{children}</div>
    </div>
 );
--- a/test/components/structures/snapshots/MatrixChat-test.tsx.snap
+++ b/test/components/structures/snapshots/MatrixChat-test.tsx.snap
@ -32,7 +32,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
    class="mx_Dialog_header mx_Dialog_headerWithCancel"
  >
    <h2
-      class="mx_Heading_h4 mx_Dialog_title"
+      class="mx_Heading_h3 mx_Dialog_title"
      id="mx_BaseDialog_title"
    >
      Leave room
@ -89,7 +89,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
    class="mx_Dialog_header mx_Dialog_headerWithCancel"
  >
    <h2
-      class="mx_Heading_h4 mx_Dialog_title"
+      class="mx_Heading_h3 mx_Dialog_title"
      id="mx_BaseDialog_title"
    >
      Leave space
--- a/test/components/views/dialogs/UserSettingsDialog-test.tsx
+++ b/test/components/views/dialogs/UserSettingsDialog-test.tsx
@ -75,7 +75,7 @@ describe("<UserSettingsDialog />", () => {
    const getActiveTabLabel = (container: Element) =>
        container.querySelector(".mx_TabbedView_tabLabel_active")?.textContent;
    const getActiveTabHeading = (container: Element) =>
-        container.querySelector(".mx_SettingsSection .mx_Heading_h2")?.textContent;
+        container.querySelector(".mx_SettingsSection .mx_Heading_h3")?.textContent;

    it("should render general settings tab when no initialTabId", () => {
        const { container } = render(getComponent());
--- a/test/components/views/dialogs/snapshots/ChangelogDialog-test.tsx.snap
+++ b/test/components/views/dialogs/snapshots/ChangelogDialog-test.tsx.snap
@ -18,7 +18,7 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
      class="mx_Dialog_header mx_Dialog_headerWithCancel"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Changelog
--- a/test/components/views/dialogs/snapshots/DevtoolsDialog-test.tsx.snap
+++ b/test/components/views/dialogs/snapshots/DevtoolsDialog-test.tsx.snap
@ -17,7 +17,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
      class="mx_Dialog_header mx_Dialog_headerWithCancel"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Developer Tools
--- a/test/components/views/dialogs/snapshots/ExportDialog-test.tsx.snap
+++ b/test/components/views/dialogs/snapshots/ExportDialog-test.tsx.snap
@ -12,7 +12,7 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
    class="mx_Dialog_header mx_Dialog_headerWithCancel"
  >
    <h2
-      class="mx_Heading_h4 mx_Dialog_title"
+      class="mx_Heading_h3 mx_Dialog_title"
      id="mx_BaseDialog_title"
    >
      Export Chat
--- a/test/components/views/dialogs/snapshots/FeedbackDialog-test.tsx.snap
+++ b/test/components/views/dialogs/snapshots/FeedbackDialog-test.tsx.snap
@ -18,7 +18,7 @@ exports[`FeedbackDialog should respect feedback config 1`] = `
      class="mx_Dialog_header"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Feedback
--- a/test/components/views/dialogs/snapshots/ManualDeviceKeyVerificationDialog-test.tsx.snap
+++ b/test/components/views/dialogs/snapshots/ManualDeviceKeyVerificationDialog-test.tsx.snap
@ -18,7 +18,7 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
      class="mx_Dialog_header mx_Dialog_headerWithCancel"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Verify session
@ -133,7 +133,7 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
      class="mx_Dialog_header mx_Dialog_headerWithCancel"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Verify session
--- a/test/components/views/dialogs/snapshots/MessageEditHistoryDialog-test.tsx.snap
+++ b/test/components/views/dialogs/snapshots/MessageEditHistoryDialog-test.tsx.snap
@ -17,7 +17,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
      class="mx_Dialog_header mx_Dialog_headerWithCancel"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Message edits
@ -133,7 +133,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
      class="mx_Dialog_header mx_Dialog_headerWithCancel"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Message edits
--- a/test/components/views/dialogs/snapshots/ServerPickerDialog-test.tsx.snap
+++ b/test/components/views/dialogs/snapshots/ServerPickerDialog-test.tsx.snap
@ -18,7 +18,7 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
      class="mx_Dialog_header mx_Dialog_headerWithCancel"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Sign into your homeserver
--- a/test/components/views/dialogs/security/snapshots/CreateKeyBackupDialog-test.tsx.snap
+++ b/test/components/views/dialogs/security/snapshots/CreateKeyBackupDialog-test.tsx.snap
@ -17,7 +17,7 @@ exports[`CreateKeyBackupDialog should display the error message when backup crea
      class="mx_Dialog_header"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Starting backup…
@ -77,7 +77,7 @@ exports[`CreateKeyBackupDialog should display the spinner when creating backup 1
      class="mx_Dialog_header"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Starting backup…
@ -124,7 +124,7 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
      class="mx_Dialog_header mx_Dialog_headerWithCancel"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Success!
--- a/test/components/views/dialogs/security/snapshots/ImportE2eKeysDialog-test.tsx.snap
+++ b/test/components/views/dialogs/security/snapshots/ImportE2eKeysDialog-test.tsx.snap
@ -17,7 +17,7 @@ exports[`ImportE2eKeysDialog renders 1`] = `
      class="mx_Dialog_header mx_Dialog_headerWithCancel"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Import room keys
--- a/test/components/views/settings/notifications/snapshots/Notifications2-test.tsx.snap
+++ b/test/components/views/settings/notifications/snapshots/Notifications2-test.tsx.snap
@ -9,7 +9,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
      class="mx_SettingsSection"
    >
      <h2
-        class="mx_Heading_h2"
+        class="mx_Heading_h3"
      >
        Notifications
      </h2>
@ -728,7 +728,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
      class="mx_SettingsSection"
    >
      <h2
-        class="mx_Heading_h2"
+        class="mx_Heading_h3"
      >
        Notifications
      </h2>
--- a/test/components/views/settings/tabs/room/snapshots/AdvancedRoomSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/room/snapshots/AdvancedRoomSettingsTab-test.tsx.snap
@ -12,7 +12,7 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
        class="mx_SettingsSection"
      >
        <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
        >
          Advanced
        </h2>
--- a/test/components/views/settings/tabs/room/snapshots/BridgeSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/room/snapshots/BridgeSettingsTab-test.tsx.snap
@ -12,7 +12,7 @@ exports[`<BridgeSettingsTab /> renders when room is bridging messages 1`] = `
        class="mx_SettingsSection"
      >
        <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
        >
          Bridges
        </h2>
@ -101,7 +101,7 @@ exports[`<BridgeSettingsTab /> renders when room is not bridging messages to any
        class="mx_SettingsSection"
      >
        <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
        >
          Bridges
        </h2>
--- a/test/components/views/settings/tabs/room/snapshots/SecurityRoomSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/room/snapshots/SecurityRoomSettingsTab-test.tsx.snap
@ -122,7 +122,7 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
    class="mx_Dialog_header mx_Dialog_headerWithCancel"
  >
    <h2
-      class="mx_Heading_h4 mx_Dialog_title"
+      class="mx_Heading_h3 mx_Dialog_title"
      id="mx_BaseDialog_title"
    >
      Failed to update the join rules
@ -164,7 +164,7 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
    class="mx_Dialog_header mx_Dialog_headerWithCancel"
  >
    <h2
-      class="mx_Heading_h4 mx_Dialog_title"
+      class="mx_Heading_h3 mx_Dialog_title"
      id="mx_BaseDialog_title"
    >
      Are you sure you want to make this encrypted room public?
--- a/test/components/views/settings/tabs/user/snapshots/AppearanceUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/snapshots/AppearanceUserSettingsTab-test.tsx.snap
@ -13,7 +13,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
        class="mx_SettingsSection"
      >
        <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
        >
          Customise your appearance
        </h2>
--- a/test/components/views/settings/tabs/user/snapshots/GeneralUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/snapshots/GeneralUserSettingsTab-test.tsx.snap
@ -60,7 +60,7 @@ exports[`<GeneralUserSettingsTab /> deactive account should render section when
  class="mx_SettingsSection"
 >
  <h2
-    class="mx_Heading_h2"
+    class="mx_Heading_h3"
  >
    Deactivate account
  </h2>
--- a/test/components/views/settings/tabs/user/snapshots/KeyboardUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/snapshots/KeyboardUserSettingsTab-test.tsx.snap
@ -12,7 +12,7 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
        class="mx_SettingsSection"
      >
        <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
        >
          Keyboard
        </h2>
--- a/test/components/views/settings/tabs/user/snapshots/LabsUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/snapshots/LabsUserSettingsTab-test.tsx.snap
@ -5,7 +5,7 @@ exports[`<LabsUserSettingsTab /> renders settings marked as beta as beta cards 1
  class="mx_SettingsSection"
 >
  <h2
-    class="mx_Heading_h2"
+    class="mx_Heading_h3"
  >
    Upcoming features
  </h2>
--- a/test/components/views/settings/tabs/user/snapshots/MjolnirUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/snapshots/MjolnirUserSettingsTab-test.tsx.snap
@ -12,7 +12,7 @@ exports[`<MjolnirUserSettingsTab /> renders correctly when user has no ignored u
        class="mx_SettingsSection"
      >
        <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
        >
          Ignored users
        </h2>
--- a/test/components/views/settings/tabs/user/snapshots/PreferencesUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/snapshots/PreferencesUserSettingsTab-test.tsx.snap
@ -13,7 +13,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
        class="mx_SettingsSection"
      >
        <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
        >
          Preferences
        </h2>
--- a/test/components/views/settings/tabs/user/snapshots/SecurityUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/snapshots/SecurityUserSettingsTab-test.tsx.snap
@ -12,7 +12,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
        class="mx_SettingsSection"
      >
        <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
        >
          Encryption
        </h2>
@ -315,7 +315,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
        class="mx_SettingsSection"
      >
        <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
        >
          Advanced
        </h2>
--- a/test/components/views/settings/tabs/user/snapshots/SidebarUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/snapshots/SidebarUserSettingsTab-test.tsx.snap
@ -12,7 +12,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings 1`] = `
        class="mx_SettingsSection"
      >
        <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
        >
          Sidebar
        </h2>
--- a/test/components/views/spaces/snapshots/AddExistingToSpaceDialog-test.tsx.snap
+++ b/test/components/views/spaces/snapshots/AddExistingToSpaceDialog-test.tsx.snap
@ -18,7 +18,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
      class="mx_Dialog_header mx_Dialog_headerWithCancel"
    >
      <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        <div
--- a/test/components/views/spaces/snapshots/SpaceSettingsVisibilityTab-test.tsx.snap
+++ b/test/components/views/spaces/snapshots/SpaceSettingsVisibilityTab-test.tsx.snap
@ -27,7 +27,7 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
        class="mx_SettingsSection"
      >
        <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
        >
          Visibility
        </h2>