mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-13 06:34:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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 <p
class="d-flex align-items-center" class="d-flex align-items-center"
> >
This is a mock for "HedgeDocLogoHorizontalGrey". Props: {"color":"dark","showText":false,"size":32,"width":32,"className":"logo"} This is a mock for "AlertIcon". Props: {"className":"logo"}
<span
class="exclamation ms-1 me-2"
>
!
</span>
<span> <span>
<span> <span>
Test Child 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 { render } from '@testing-library/react'
import { ApplicationErrorAlert } from './application-error-alert' 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', () => ({ jest.mock('./alert-icon', () => ({
HedgeDocLogoHorizontalGrey: (props: PropsWithChildren) => AlertIcon: (props: AlertIconProps) => `This is a mock for "AlertIcon". Props: ${JSON.stringify(props)}`
`This is a mock for "HedgeDocLogoHorizontalGrey". Props: ${JSON.stringify(props)}`
})) }))
describe('ApplicationErrorAlert', () => { 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 type { PropsWithChildren } from 'react'
import React from 'react' import React from 'react'
import { HedgeDocLogoHorizontalGrey } from '../hedge-doc-logo/hedge-doc-logo-horizontal-grey'
import styles from './style.module.scss' import styles from './style.module.scss'
import { Alert } from 'react-bootstrap' import { Alert } from 'react-bootstrap'
import { concatCssClasses } from '../../../utils/concat-css-classes' import { concatCssClasses } from '../../../utils/concat-css-classes'
import { AlertIcon } from './alert-icon'
export interface ApplicationErrorAlertProps extends PropsWithChildren { export interface ApplicationErrorAlertProps extends PropsWithChildren {
className?: string className?: string
@ -23,8 +23,7 @@ export const ApplicationErrorAlert: React.FC<ApplicationErrorAlertProps> = ({ ch
return ( return (
<Alert className={concatCssClasses(styles.alert, className)}> <Alert className={concatCssClasses(styles.alert, className)}>
<p className={'d-flex align-items-center'}> <p className={'d-flex align-items-center'}>
<HedgeDocLogoHorizontalGrey color={'dark'} showText={false} size={32} width={32} className={styles.logo} /> <AlertIcon className={styles.logo} />
<span className={concatCssClasses(styles.exclamation, 'ms-1 me-2')}>!</span>
<span>{children}</span> <span>{children}</span>
</p> </p>
</Alert> </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 * 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 { .alert {
$color: #5A0F04; $color: #5A0F04;
display: flex; display: flex;
@ -22,5 +14,7 @@
} }
.logo { .logo {
flex: 0 0 32px; flex: 0 0 50px;
height: 48px;
margin-right: 8px;
} }