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;
}