GYU: Update banner (#11211)

* Update help text

* chore: fixed lint issues

* update i18n

* Update button text

* Correct css for settings banners

Author: justjanne

res/css/views/settings/tabs/_SettingsBanner.pcss

@@ -16,7 +16,6 @@ limitations under the License.
 
 .mx_SettingsBanner {
     background: $system;
-    line-height: 2.25rem;
     border-radius: 8px;
     padding: 12px 16px;
     gap: 12px;
@@ -29,7 +28,6 @@ limitations under the License.
     }
 
     .mx_AccessibleButton {
-        align-self: initial;
         white-space: nowrap;
     }
 }

src/components/views/settings/notifications/NotificationSettings2.tsx

@@ -31,6 +31,7 @@ import SettingsStore from "../../../../settings/SettingsStore";
 import { NotificationColor } from "../../../../stores/notifications/NotificationColor";
 import { clearAllNotifications } from "../../../../utils/notifications";
 import AccessibleButton from "../../elements/AccessibleButton";
+import ExternalLink from "../../elements/ExternalLink";
 import LabelledCheckbox from "../../elements/LabelledCheckbox";
 import LabelledToggleSwitch from "../../elements/LabelledToggleSwitch";
 import StyledRadioGroup from "../../elements/StyledRadioGroup";
@@ -76,6 +77,10 @@ function boldText(text: string): JSX.Element {
     return <strong>{text}</strong>;
 }
 
+function helpLink(sub: string): JSX.Element {
+    return <ExternalLink href="https://element.io/help#settings2">{sub}</ExternalLink>;
+}
+
 function useHasUnreadNotifications(): boolean {
     const cli = useMatrixClientContext();
     return cli.getRooms().some((room) => room.getUnreadNotificationCount() > 0);
@@ -101,13 +106,20 @@ export default function NotificationSettings2(): JSX.Element {
             {hasPendingChanges && model !== null && (
                 <SettingsBanner
                     icon={<img src={NewAndImprovedIcon} alt="" width={12} />}
-                    action={_t("Switch now")}
+                    action={_t("Proceed")}
                     onAction={() => reconcile(model!)}
                 >
                     {_t(
-                        "<strong>Update:</strong> We have updated our notification settings. This won’t affect your previously selected settings.",
+                        "<strong>Update:</strong>" +
+                            "We’ve simplified Notifications Settings to make options easier to find. " +
+                            "Some custom settings you’ve chosen in the past are not shown here, but they’re still active. " +
+                            "If you proceed, some of your settings may change. " +
+                            "<a>Learn more</a>",
                         {},
-                        { strong: boldText },
+                        {
+                            strong: boldText,
+                            a: helpLink,
+                        },
                     )}
                 </SettingsBanner>
             )}

src/i18n/strings/en_EN.json

@@ -1783,8 +1783,8 @@
     "Select which emails you want to send summaries to. Manage your emails in <button>General</button>.": "Select which emails you want to send summaries to. Manage your emails in <button>General</button>.",
     "People, Mentions and Keywords": "People, Mentions and Keywords",
     "Mentions and Keywords only": "Mentions and Keywords only",
-    "Switch now": "Switch now",
-    "<strong>Update:</strong> We have updated our notification settings. This won’t affect your previously selected settings.": "<strong>Update:</strong> We have updated our notification settings. This won’t affect your previously selected settings.",
+    "Proceed": "Proceed",
+    "<strong>Update:</strong>We’ve simplified Notifications Settings to make options easier to find. Some custom settings you’ve chosen in the past are not shown here, but they’re still active. If you proceed, some of your settings may change. <a>Learn more</a>": "<strong>Update:</strong>We’ve simplified Notifications Settings to make options easier to find. Some custom settings you’ve chosen in the past are not shown here, but they’re still active. If you proceed, some of your settings may change. <a>Learn more</a>",
     "Show message preview in desktop notification": "Show message preview in desktop notification",
     "I want to be notified for (Default Setting)": "I want to be notified for (Default Setting)",
     "This setting will be applied by default to all your rooms.": "This setting will be applied by default to all your rooms.",