mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
Merge pull request #20063 from overleaf/ii-bs5-system-notifications
[web] BS5 system notifications GitOrigin-RevId: a5a17a418193e325c0f561708c99240191cff8e7
This commit is contained in:
parent
db4d23d2df
commit
6437059783
3 changed files with 38 additions and 1 deletions
|
@ -1,4 +1,6 @@
|
||||||
import { useTranslation } from 'react-i18next'
|
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 = {
|
type CloseProps = {
|
||||||
onDismiss: React.MouseEventHandler<HTMLButtonElement>
|
onDismiss: React.MouseEventHandler<HTMLButtonElement>
|
||||||
|
@ -14,7 +16,16 @@ function Close({ onDismiss, variant = 'light' }: CloseProps) {
|
||||||
className={`close pull-right ${variant}`}
|
className={`close pull-right ${variant}`}
|
||||||
onClick={onDismiss}
|
onClick={onDismiss}
|
||||||
>
|
>
|
||||||
<span aria-hidden="true">×</span>
|
<BootstrapVersionSwitcher
|
||||||
|
bs3={<span aria-hidden="true">×</span>}
|
||||||
|
bs5={
|
||||||
|
<MaterialIcon
|
||||||
|
type="close"
|
||||||
|
className="align-text-bottom"
|
||||||
|
accessibilityLabel={t('close')}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
<span className="sr-only">{t('close')}</span>
|
<span className="sr-only">{t('close')}</span>
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
@import 'dropdown-menu';
|
@import 'dropdown-menu';
|
||||||
@import 'split-button';
|
@import 'split-button';
|
||||||
@import 'notifications';
|
@import 'notifications';
|
||||||
|
@import 'system-messages';
|
||||||
@import 'tooltip';
|
@import 'tooltip';
|
||||||
@import 'card';
|
@import 'card';
|
||||||
@import 'badge';
|
@import 'badge';
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
Loading…
Reference in a new issue