github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-10-17 21:05:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #20063 from overleaf/ii-bs5-system-notifications

Browse source 
[web] BS5 system notifications

GitOrigin-RevId: a5a17a418193e325c0f561708c99240191cff8e7
This commit is contained in:
ilkin-overleaf 2024-08-28 12:10:46 +03:00 committed by Copybot
parent db4d23d2df
commit 6437059783
3 changed files with 38 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
services/web/frontend/js/shared/components/close.tsx
View file

@ -1,4 +1,6 @@
import { useTranslation } from 'react-i18next'
import MaterialIcon from '@/shared/components/material-icon'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
type CloseProps = {
onDismiss: React.MouseEventHandler<HTMLButtonElement>
@ -14,7 +16,16 @@ function Close({ onDismiss, variant = 'light' }: CloseProps) {
className={`close pull-right ${variant}`}
onClick={onDismiss}
>
<span aria-hidden="true">&times;</span>
<BootstrapVersionSwitcher
bs3={<span aria-hidden="true">&times;</span>}
bs5={
<MaterialIcon
type="close"
className="align-text-bottom"
accessibilityLabel={t('close')}
/>
}
/>
<span className="sr-only">{t('close')}</span>
</button>
)

1
services/web/frontend/stylesheets/bootstrap-5/components/all.scss
View file

@ -3,6 +3,7 @@
@import 'dropdown-menu';
@import 'split-button';
@import 'notifications';
@import 'system-messages';
@import 'tooltip';
@import 'card';
@import 'badge';

25
services/web/frontend/stylesheets/bootstrap-5/components/system-messages.scss Normal file
View file

@ -0,0 +1,25 @@
@use 'sass:color';
.system-messages {
@include list-unstyled;
margin: 0;
.system-message {
padding: var(--spacing-03) var(--spacing-05);
background-color: var(--bg-info-01);
color: var(--content-primary-dark);
border-bottom: solid 1px color.adjust($blue-50, $lightness: 10%);
a {
color: var(--content-primary-dark);
text-decoration: underline;
}
}
}
.system-message .close {
@include reset-button;
color: var(--content-primary-dark);
}