overleaf/services/web/frontend/js/features/settings/components/emails/header.tsx
Rebeka Dekany f78e619d87 Merge pull request #18331 from overleaf/rd-bs5-renaming
[web ] Bootstrap 5 - rename the wrapper components and restructure

GitOrigin-RevId: 7a76903df81cd546e9e469f24c4f203ea6a61672
2024-05-16 08:05:31 +00:00

53 lines
1.3 KiB
TypeScript

import { useTranslation } from 'react-i18next'
import EmailCell from './cell'
import OLCol from '@/features/ui/components/ol/ol-col'
import OLRow from '@/features/ui/components/ol/ol-row'
import classnames from 'classnames'
import { bsVersion } from '@/features/utils/bootstrap-5'
function Header() {
const { t } = useTranslation()
return (
<>
<OLRow>
<OLCol
md={4}
className={bsVersion({
bs5: 'd-none d-sm-block',
bs3: 'hidden-xs',
})}
>
<EmailCell>
<strong>{t('email')}</strong>
</EmailCell>
</OLCol>
<OLCol
md={8}
className={bsVersion({
bs5: 'd-none d-sm-block',
bs3: 'hidden-xs',
})}
>
<EmailCell>
<strong>{t('institution_and_role')}</strong>
</EmailCell>
</OLCol>
</OLRow>
<div
className={classnames(
bsVersion({ bs5: 'd-none d-sm-block', bs3: 'hidden-xs' }),
'horizontal-divider'
)}
/>
<div
className={classnames(
bsVersion({ bs5: 'd-none d-sm-block', bs3: 'hidden-xs' }),
'horizontal-divider'
)}
/>
</>
)
}
export default Header