diff --git a/frontend/src/components/common/application-error-alert/__snapshots__/application-error-alert.spec.tsx.snap b/frontend/src/components/common/application-error-alert/__snapshots__/application-error-alert.spec.tsx.snap index e2031aaac..289c36a54 100644 --- a/frontend/src/components/common/application-error-alert/__snapshots__/application-error-alert.spec.tsx.snap +++ b/frontend/src/components/common/application-error-alert/__snapshots__/application-error-alert.spec.tsx.snap @@ -9,12 +9,7 @@ exports[`ApplicationErrorAlert renders correctly 1`] = `

- 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"} Test Child diff --git a/frontend/src/components/common/application-error-alert/alert-icon.tsx b/frontend/src/components/common/application-error-alert/alert-icon.tsx new file mode 100644 index 000000000..e8e607227 --- /dev/null +++ b/frontend/src/components/common/application-error-alert/alert-icon.tsx @@ -0,0 +1,33 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import React from 'react' + +export interface AlertIconProps { + className?: string +} + +/** + * Renders the icon used in the {@link ApplicationAlert}. + * + * @param className The class name attribute that should be added to the SVG + */ +export const AlertIcon: React.FC = ({ className }) => { + return ( + + + + ) +} diff --git a/frontend/src/components/common/application-error-alert/application-error-alert.spec.tsx b/frontend/src/components/common/application-error-alert/application-error-alert.spec.tsx index d6bfa45b4..d5a3fe40f 100644 --- a/frontend/src/components/common/application-error-alert/application-error-alert.spec.tsx +++ b/frontend/src/components/common/application-error-alert/application-error-alert.spec.tsx @@ -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', () => { diff --git a/frontend/src/components/common/application-error-alert/application-error-alert.tsx b/frontend/src/components/common/application-error-alert/application-error-alert.tsx index c77f740cb..8aa718ba9 100644 --- a/frontend/src/components/common/application-error-alert/application-error-alert.tsx +++ b/frontend/src/components/common/application-error-alert/application-error-alert.tsx @@ -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 = ({ ch return (

- - ! + {children}

diff --git a/frontend/src/components/common/application-error-alert/style.module.scss b/frontend/src/components/common/application-error-alert/style.module.scss index b1e0f2c03..6cab13104 100644 --- a/frontend/src/components/common/application-error-alert/style.module.scss +++ b/frontend/src/components/common/application-error-alert/style.module.scss @@ -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; }