Fix Match system theme toggle

package.json

@@ -65,7 +65,8 @@
         "@types/seedrandom": "3.0.8",
         "oidc-client-ts": "3.0.1",
         "jwt-decode": "4.0.0",
-        "@floating-ui/react": "0.26.11"
+        "@floating-ui/react": "0.26.11",
+        "@radix-ui/react-id": "1.1.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
@@ -78,7 +79,7 @@
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.2.0",
-        "@vector-im/compound-web": "^4.9.0",
+        "@vector-im/compound-web": "^5.1.2",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

playwright/e2e/settings/appearance-user-settings-tab/index.ts

@@ -77,7 +77,7 @@ class Helpers {
      * Return the system theme toggle
      */
     getMatchSystemThemeCheckbox() {
-        return this.getThemePanel().getByRole("checkbox");
+        return this.getThemePanel().getByRole("checkbox", { name: "Match system theme" });
     }
 
     /**

res/css/views/settings/_UserProfileSettings.pcss

@@ -35,6 +35,7 @@ limitations under the License.
 
     .mx_UserProfileSettings_profile_controls_userId {
         width: 100%;
+        margin-top: var(--cpd-space-4x);
         .mx_CopyableText {
             margin-top: var(--cpd-space-1x);
             width: 100%;

src/components/views/settings/ThemeChoicePanel.tsx

@@ -23,6 +23,8 @@ import {
     RadioControl,
     EditInPlace,
     IconButton,
+    ErrorMessage,
+    HelpMessage,
 } from "@vector-im/compound-web";
 import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
 import classNames from "classnames";
@@ -231,10 +233,9 @@ function CustomTheme({ theme }: CustomThemeProps): JSX.Element {
             <EditInPlace
                 className="mx_ThemeChoicePanel_CustomTheme_EditInPlace"
                 label={_t("settings|appearance|custom_theme_add")}
+                cancelButtonLabel={_t("action|cancel")}
                 saveButtonLabel={_t("settings|appearance|custom_theme_add")}
                 savingLabel={_t("settings|appearance|custom_theme_downloading")}
-                helpLabel={_t("settings|appearance|custom_theme_help")}
-                error={error}
                 value={customTheme}
                 onChange={(e: ChangeEvent<HTMLInputElement>) => {
                     setError(undefined);
@@ -281,7 +282,10 @@ function CustomTheme({ theme }: CustomThemeProps): JSX.Element {
                     await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
                 }}
                 onCancel={clear}
-            />
+            >
+                <HelpMessage>{_t("settings|appearance|custom_theme_help")}</HelpMessage>
+                {error && <ErrorMessage>{error}</ErrorMessage>}
+            </EditInPlace>
             <CustomThemeList theme={theme} />
         </div>
     );

src/components/views/settings/UserProfileSettings.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
-import { EditInPlace, Alert } from "@vector-im/compound-web";
+import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
@@ -61,7 +61,6 @@ const UsernameBox: React.FC<UsernameBoxProps> = ({ username }) => {
 const UserProfileSettings: React.FC = () => {
     const [avatarURL, setAvatarURL] = useState(OwnProfileStore.instance.avatarMxc);
     const [displayName, setDisplayName] = useState(OwnProfileStore.instance.displayName ?? "");
-    const [initialDisplayName, setInitialDisplayName] = useState(OwnProfileStore.instance.displayName ?? "");
     const [avatarError, setAvatarError] = useState<boolean>(false);
     const [maxUploadSize, setMaxUploadSize] = useState<number | undefined>();
     const [displayNameError, setDisplayNameError] = useState<boolean>(false);
@@ -128,7 +127,6 @@ const UserProfileSettings: React.FC = () => {
         try {
             setDisplayNameError(false);
             await client.setDisplayName(displayName);
-            setInitialDisplayName(displayName);
         } catch (e) {
             setDisplayNameError(true);
             throw e;
@@ -160,16 +158,16 @@ const UserProfileSettings: React.FC = () => {
                     className="mx_UserProfileSettings_profile_displayName"
                     label={_t("settings|general|display_name")}
                     value={displayName}
-                    disableSaveButton={displayName === initialDisplayName}
                     saveButtonLabel={_t("common|save")}
                     cancelButtonLabel={_t("common|cancel")}
                     savedLabel={_t("common|saved")}
                     savingLabel={_t("common|updating")}
                     onChange={onDisplayNameChanged}
                     onCancel={onDisplayNameCancel}
                     onSave={onDisplayNameSave}
-                    error={displayNameError ? _t("settings|general|display_name_error") : undefined}
-                />
+                >
+                    {displayNameError && <ErrorMessage>{_t("settings|general|display_name_error")}</ErrorMessage>}
+                </EditInPlace>
             </div>
             {avatarError && (
                 <Alert title={_t("settings|general|avatar_upload_error_title")} type="critical">