Replace × close links with buttons in banners (#5735)

This commit is contained in:
Tom Najdek 2026-02-03 21:51:24 +01:00 • committed by GitHub
parent 7b0f5d8f32
commit 0f565ecfef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 31 additions and 10 deletions

View file

@ -1135,7 +1135,9 @@
<html:div class="spacer"/>
<html:a id="sync-reminder-disable" class="link"/>
<html:a id="sync-reminder-remind" class="link"/>
<label is="text-link" id="sync-reminder-close" class="close-link">×</label>
<html:div role="button" id="sync-reminder-close" class="close-btn" data-l10n-id="banner-close-button">
<html:span class="icon" />
</html:div>
</html:div>
</vbox>
@ -1160,7 +1162,9 @@
<html:div id="retracted-items-banner" class="banner">
<html:div id="retracted-items-message" class="message"/>
<label is="text-link" id="retracted-items-link"/>
<label is="text-link" id="retracted-items-close" class="close-link">×</label>
<html:div role="button" id="retracted-items-close" class="close-btn" data-l10n-id="banner-close-button">
<html:span class="icon" />
</html:div>
</html:div>
</vbox>
@ -1170,7 +1174,9 @@
<html:a id="architecture-warning-action" data-l10n-id="architecture-warning-action" class="link" />
<html:div class="spacer" />
<label is="text-link" id="architecture-warning-remind" data-l10n-id="general-remind-me-later" />
<label is="text-link" id="architecture-warning-close" class="close-link">×</label>
<html:div role="button" id="architecture-warning-close" class="close-btn" data-l10n-id="banner-close-button">
<html:span class="icon" />
</html:div>
</html:div>
</vbox>
@ -1179,7 +1185,9 @@
<html:div id="file-renaming-message" class="message" data-l10n-id="file-renaming-banner-message" />
<html:a id="file-renaming-documentation-link" data-l10n-id="file-renaming-banner-documentation-link" class="link" />
<html:div class="spacer" />
<label is="text-link" id="file-renaming-banner-close" class="close-link">×</label>
<html:div role="button" id="file-renaming-banner-close" class="close-btn" data-l10n-id="banner-close-button">
<html:span class="icon" />
</html:div>
</html:div>
</vbox>

View file

@ -856,3 +856,6 @@ normalize-attachment-titles-text = { -app-name } automatically renames files on
In older versions of { -app-name }, as well as when using certain plugins, attachment titles could be changed unnecessarily to match the filenames.
Would you like to update the selected attachments to use simpler titles? Only primary attachments with titles that match the filename will be changed.
banner-close-button =
.aria-label = Dismiss notification

View file

@ -32,12 +32,22 @@
padding-inline: 0.5em;
}
label[is="text-link"].close-link {
text-decoration: none;
cursor: pointer;
font-size: 22px;
line-height: 26px;
margin-inline-end: -0.5em;
.close-btn {
border-radius: 4px;
display: flex;
&:hover {
background-color: var(--color-background50);
}
.icon {
width: 20px;
height: 20px;
@include svgicon("x-8", "universal", "16");
color: inherit;
padding-block: 4px;
box-sizing: border-box;
}
}
.message {