element-web/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
Germain 2a7780052e
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
2023-07-04 16:54:28 +00:00

1604 lines
46 KiB
Text

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div>
<div
class="mx_NotificationSettings2"
>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h3"
>
Notifications
</h2>
<div
class="mx_SettingsSection_subSections"
>
<div
class="mx_SettingsSubsection_content mx_NotificationSettings2_flags"
>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_7Qu"
>
Enable notifications for this account
</div>
</span>
<div
aria-checked="true"
aria-disabled="true"
aria-labelledby="mx_LabelledToggleSwitch_7Qu"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_QUoKa"
>
Enable desktop notifications for this session
</div>
</span>
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_QUoKa"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_eB"
>
Show message preview in desktop notification
</div>
</span>
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_eB"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_yfi"
>
Enable audible notifications for this session
</div>
</span>
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_yfi"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
I want to be notified for (Default Setting)
</h3>
</div>
<div
class="mx_SettingsSubsection_description"
>
<div
class="mx_SettingsSubsection_text"
>
This setting will be applied by default to all your rooms.
</div>
</div>
<div
class="mx_SettingsSubsection_content"
>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
>
<input
checked=""
disabled=""
id="defaultNotificationLevel-all_messages"
name="defaultNotificationLevel"
type="radio"
value="all_messages"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
All messages
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_disabled"
>
<input
disabled=""
id="defaultNotificationLevel-people_mentions_keywords"
name="defaultNotificationLevel"
type="radio"
value="people_mentions_keywords"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
People, Mentions and Keywords
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_disabled"
>
<input
disabled=""
id="defaultNotificationLevel-mentions_keywords"
name="defaultNotificationLevel"
type="radio"
value="mentions_keywords"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Mentions and Keywords only
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Play a sound for
</h3>
</div>
<div
class="mx_SettingsSubsection_description"
>
<div
class="mx_SettingsSubsection_text"
>
Applied by default to all rooms on all devices.
</div>
</div>
<div
class="mx_SettingsSubsection_content"
>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
disabled=""
id="checkbox_MRMG"
type="checkbox"
/>
<label
for="checkbox_MRMG"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
People
</span>
</div>
</label>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
disabled=""
id="checkbox_W9"
type="checkbox"
/>
<label
for="checkbox_W9"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Mentions and Keywords
</span>
</div>
</label>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
disabled=""
id="checkbox_A5Cs"
type="checkbox"
/>
<label
for="checkbox_A5Cs"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Audio and Video calls
</span>
</div>
</label>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Other things we think you might be interested in:
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
disabled=""
id="checkbox_RDn"
type="checkbox"
/>
<label
for="checkbox_RDn"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Invited to a room
</span>
</div>
</label>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
disabled=""
id="checkbox_jV"
type="checkbox"
/>
<label
for="checkbox_jV"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
New room activity, upgrades and status messages occur
</span>
</div>
</label>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
disabled=""
id="checkbox_1Oid"
type="checkbox"
/>
<label
for="checkbox_1Oid"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Messages sent by bots
</span>
</div>
</label>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Mentions and Keywords
</h3>
</div>
<div
class="mx_SettingsSubsection_description"
>
<div
class="mx_SettingsSubsection_text"
>
<span>
Show a badge
<div
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_2char"
>
<span
class="mx_NotificationBadge_count"
>
1
</span>
</div>
when keywords are used in a room.
</span>
</div>
</div>
<div
class="mx_SettingsSubsection_content"
>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
disabled=""
id="checkbox_PW"
type="checkbox"
/>
<label
for="checkbox_PW"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Notify when someone mentions using @room
</span>
</div>
</label>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
disabled=""
id="checkbox_N"
type="checkbox"
/>
<label
for="checkbox_N"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Notify when someone mentions using @displayname or @userId:matrix.org
</span>
</div>
</label>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
disabled=""
id="checkbox_4rTRs"
type="checkbox"
/>
<label
for="checkbox_4rTRs"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Notify when someone uses a keyword
</span>
<span
class="mx_LabelledCheckbox_byline"
>
Enter keywords here, or use for spelling variations or nicknames
</span>
</div>
</label>
<div
class="mx_TagComposer mx_TagComposer_disabled"
>
<form
class="mx_TagComposer_input"
>
<div
class="mx_Field mx_Field_input"
>
<input
autocomplete="off"
disabled=""
id="mx_NotificationSettings2_Keywords_field"
label="Keyword"
placeholder="New keyword"
type="text"
value=""
/>
<label
for="mx_NotificationSettings2_Keywords_field"
>
Keyword
</label>
</div>
<div
aria-disabled="true"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
disabled=""
role="button"
tabindex="0"
>
Add
</div>
</form>
<div
class="mx_TagComposer_tags"
role="list"
/>
</div>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Email summary
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_SettingsSubsection_text"
>
Receive an email summary of missed notifications
</div>
<div
class="mx_SettingsSubsection_description mx_NotificationPusherSettings_detail"
>
<div
class="mx_SettingsSubsection_text"
>
<span>
Select which emails you want to send summaries to. Manage your emails in
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
General
</div>
.
</span>
</div>
</div>
<div
class="mx_SettingsIndent"
/>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Quick Actions
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
aria-disabled="true"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline mx_AccessibleButton_disabled"
disabled=""
role="button"
tabindex="0"
>
Reset to default settings
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`<Notifications /> matches the snapshot 1`] = `
<div>
<div
class="mx_NotificationSettings2"
>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h3"
>
Notifications
</h2>
<div
class="mx_SettingsSection_subSections"
>
<div
class="mx_SettingsSubsection_content mx_NotificationSettings2_flags"
>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_7Qu"
>
Enable notifications for this account
</div>
</span>
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_7Qu"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_QUoKa"
>
Enable desktop notifications for this session
</div>
</span>
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_QUoKa"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_eB"
>
Show message preview in desktop notification
</div>
</span>
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_eB"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_yfi"
>
Enable audible notifications for this session
</div>
</span>
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_yfi"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
I want to be notified for (Default Setting)
</h3>
</div>
<div
class="mx_SettingsSubsection_description"
>
<div
class="mx_SettingsSubsection_text"
>
This setting will be applied by default to all your rooms.
</div>
</div>
<div
class="mx_SettingsSubsection_content"
>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
<input
checked=""
id="defaultNotificationLevel-all_messages"
name="defaultNotificationLevel"
type="radio"
value="all_messages"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
All messages
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
>
<input
id="defaultNotificationLevel-people_mentions_keywords"
name="defaultNotificationLevel"
type="radio"
value="people_mentions_keywords"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
People, Mentions and Keywords
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
<input
id="defaultNotificationLevel-mentions_keywords"
name="defaultNotificationLevel"
type="radio"
value="mentions_keywords"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Mentions and Keywords only
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Play a sound for
</h3>
</div>
<div
class="mx_SettingsSubsection_description"
>
<div
class="mx_SettingsSubsection_text"
>
Applied by default to all rooms on all devices.
</div>
</div>
<div
class="mx_SettingsSubsection_content"
>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
id="checkbox_MRMG"
type="checkbox"
/>
<label
for="checkbox_MRMG"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
People
</span>
</div>
</label>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
id="checkbox_W9"
type="checkbox"
/>
<label
for="checkbox_W9"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Mentions and Keywords
</span>
</div>
</label>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
id="checkbox_A5Cs"
type="checkbox"
/>
<label
for="checkbox_A5Cs"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Audio and Video calls
</span>
</div>
</label>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Other things we think you might be interested in:
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
id="checkbox_RDn"
type="checkbox"
/>
<label
for="checkbox_RDn"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Invited to a room
</span>
</div>
</label>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
id="checkbox_jV"
type="checkbox"
/>
<label
for="checkbox_jV"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
New room activity, upgrades and status messages occur
</span>
</div>
</label>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
id="checkbox_1Oid"
type="checkbox"
/>
<label
for="checkbox_1Oid"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Messages sent by bots
</span>
</div>
</label>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Mentions and Keywords
</h3>
</div>
<div
class="mx_SettingsSubsection_description"
>
<div
class="mx_SettingsSubsection_text"
>
<span>
Show a badge
<div
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_2char"
>
<span
class="mx_NotificationBadge_count"
>
1
</span>
</div>
when keywords are used in a room.
</span>
</div>
</div>
<div
class="mx_SettingsSubsection_content"
>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
id="checkbox_PW"
type="checkbox"
/>
<label
for="checkbox_PW"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Notify when someone mentions using @room
</span>
</div>
</label>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
id="checkbox_N"
type="checkbox"
/>
<label
for="checkbox_N"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Notify when someone mentions using @displayname or @userId:matrix.org
</span>
</div>
</label>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
checked=""
id="checkbox_4rTRs"
type="checkbox"
/>
<label
for="checkbox_4rTRs"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
Notify when someone uses a keyword
</span>
<span
class="mx_LabelledCheckbox_byline"
>
Enter keywords here, or use for spelling variations or nicknames
</span>
</div>
</label>
<div
class="mx_TagComposer"
>
<form
class="mx_TagComposer_input"
>
<div
class="mx_Field mx_Field_input"
>
<input
autocomplete="off"
id="mx_NotificationSettings2_Keywords_field"
label="Keyword"
placeholder="New keyword"
type="text"
value=""
/>
<label
for="mx_NotificationSettings2_Keywords_field"
>
Keyword
</label>
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Add
</div>
</form>
<div
class="mx_TagComposer_tags"
role="list"
>
<div
class="mx_Tag"
role="listitem"
>
justjann3
<div
aria-label="Remove"
class="mx_AccessibleButton mx_Tag_delete"
role="button"
tabindex="0"
>
<div />
</div>
</div>
<div
class="mx_Tag"
role="listitem"
>
justj4nn3
<div
aria-label="Remove"
class="mx_AccessibleButton mx_Tag_delete"
role="button"
tabindex="0"
>
<div />
</div>
</div>
<div
class="mx_Tag"
role="listitem"
>
justj4nne
<div
aria-label="Remove"
class="mx_AccessibleButton mx_Tag_delete"
role="button"
tabindex="0"
>
<div />
</div>
</div>
<div
class="mx_Tag"
role="listitem"
>
Janne
<div
aria-label="Remove"
class="mx_AccessibleButton mx_Tag_delete"
role="button"
tabindex="0"
>
<div />
</div>
</div>
<div
class="mx_Tag"
role="listitem"
>
J4nne
<div
aria-label="Remove"
class="mx_AccessibleButton mx_Tag_delete"
role="button"
tabindex="0"
>
<div />
</div>
</div>
<div
class="mx_Tag"
role="listitem"
>
Jann3
<div
aria-label="Remove"
class="mx_AccessibleButton mx_Tag_delete"
role="button"
tabindex="0"
>
<div />
</div>
</div>
<div
class="mx_Tag"
role="listitem"
>
jann3
<div
aria-label="Remove"
class="mx_AccessibleButton mx_Tag_delete"
role="button"
tabindex="0"
>
<div />
</div>
</div>
<div
class="mx_Tag"
role="listitem"
>
j4nne
<div
aria-label="Remove"
class="mx_AccessibleButton mx_Tag_delete"
role="button"
tabindex="0"
>
<div />
</div>
</div>
<div
class="mx_Tag"
role="listitem"
>
janne
<div
aria-label="Remove"
class="mx_AccessibleButton mx_Tag_delete"
role="button"
tabindex="0"
>
<div />
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Email summary
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_SettingsSubsection_text"
>
Receive an email summary of missed notifications
</div>
<div
class="mx_SettingsSubsection_description mx_NotificationPusherSettings_detail"
>
<div
class="mx_SettingsSubsection_text"
>
<span>
Select which emails you want to send summaries to. Manage your emails in
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
General
</div>
.
</span>
</div>
</div>
<div
class="mx_SettingsIndent"
>
<label
class="mx_LabelledCheckbox"
>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
id="checkbox_Yn"
type="checkbox"
/>
<label
for="checkbox_Yn"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_LabelledCheckbox_labels"
>
<span
class="mx_LabelledCheckbox_label"
>
test@example.tld
</span>
</div>
</label>
</div>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Notification targets
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<ul>
<li>
My EyeFon
</li>
</ul>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Quick Actions
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
role="button"
tabindex="0"
>
Reset to default settings
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;