Make notification settings copy/layout more user-friendly (#34120)

* Make notification settings copy/layout more user-friendly and closer to EX.

* Fix E2E tests.

apps/web/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts

@@ -532,7 +532,7 @@ test.describe("Room list", () => {
 
             await app.viewRoomById(roomId);
             await app.settings.openRoomSettings("Notifications");
-            await page.getByText("Off").click();
+            await page.getByText("Mute").click();
             await app.settings.closeDialog();
 
             const room = roomListView.getByRole("option", { name: "silent" });

apps/web/src/components/views/settings/Notifications.tsx

@@ -89,9 +89,9 @@ const RULE_DISPLAY_ORDER: string[] = [
     RuleId.EncryptedMessage,
 
     // Mentions
-    RuleId.ContainsDisplayName,
     RuleId.ContainsUserName,
     RuleId.AtRoomNotification,
+    RuleId.ContainsDisplayName,
 
     // Other
     RuleId.InviteToSelf,

apps/web/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx

@@ -231,7 +231,7 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
                                     value: RoomNotifState.Mute,
                                     label: (
                                         <>
-                                            {_t("common|off")}
+                                            {_t("common|mute")}
                                             <div className="mx_NotificationSettingsTab_microCopy">
                                                 {_t("notifications|mute_description")}
                                             </div>