github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-12-23 01:02:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: replace exclamation mark in application error alert with SVG to ensure sizing and position

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-08-19 11:43:31 +02:00
parent 1f05cee725
commit 9e44f2b26c
5 changed files with 42 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/components/common/application-error-alert/__snapshots__/application-error-alert.spec.tsx.snap
View file

@ -9,12 +9,7 @@ exports[`ApplicationErrorAlert renders correctly 1`] = `
<p
class="d-flex align-items-center"
>
This is a mock for "HedgeDocLogoHorizontalGrey". Props: {"color":"dark","showText":false,"size":32,"width":32,"className":"logo"}
<span
class="exclamation ms-1 me-2"
>
!
</span>
This is a mock for "AlertIcon". Props: {"className":"logo"}
<span>
<span>
Test Child

33
frontend/src/components/common/application-error-alert/alert-icon.tsx Normal file
View file

File diff suppressed because one or more lines are too long

7
frontend/src/components/common/application-error-alert/application-error-alert.spec.tsx
View file

@ -6,11 +6,10 @@
import { render } from '@testing-library/react'
import { ApplicationErrorAlert } from './application-error-alert'
import type { PropsWithChildren } from 'react'
import type { AlertIconProps } from './alert-icon'
jest.mock('../hedge-doc-logo/hedge-doc-logo-horizontal-grey', () => ({
HedgeDocLogoHorizontalGrey: (props: PropsWithChildren) =>
`This is a mock for "HedgeDocLogoHorizontalGrey". Props: ${JSON.stringify(props)}`
jest.mock('./alert-icon', () => ({
AlertIcon: (props: AlertIconProps) => `This is a mock for "AlertIcon". Props: ${JSON.stringify(props)}`
}))
describe('ApplicationErrorAlert', () => {

5
frontend/src/components/common/application-error-alert/application-error-alert.tsx
View file

@ -5,10 +5,10 @@
*/
import type { PropsWithChildren } from 'react'
import React from 'react'
import { HedgeDocLogoHorizontalGrey } from '../hedge-doc-logo/hedge-doc-logo-horizontal-grey'
import styles from './style.module.scss'
import { Alert } from 'react-bootstrap'
import { concatCssClasses } from '../../../utils/concat-css-classes'
import { AlertIcon } from './alert-icon'
export interface ApplicationErrorAlertProps extends PropsWithChildren {
className?: string
@ -23,8 +23,7 @@ export const ApplicationErrorAlert: React.FC<ApplicationErrorAlertProps> = ({ ch
return (
<Alert className={concatCssClasses(styles.alert, className)}>
<p className={'d-flex align-items-center'}>
<HedgeDocLogoHorizontalGrey color={'dark'} showText={false} size={32} width={32} className={styles.logo} />
<span className={concatCssClasses(styles.exclamation, 'ms-1 me-2')}>!</span>
<AlertIcon className={styles.logo} />
<span>{children}</span>
</p>
</Alert>

12
frontend/src/components/common/application-error-alert/style.module.scss
View file

@ -4,14 +4,6 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
.exclamation {
font-size: 2.3em;
line-height: 1.4em;
height: 48px;
display: inline-block;
user-select: none;
}
.alert {
$color: #5A0F04;
display: flex;
@ -22,5 +14,7 @@
}
.logo {
flex: 0 0 32px;
flex: 0 0 50px;
height: 48px;
margin-right: 8px;
}