add: new UI error

greenbone · Jun 18, 2024 · d08e8f5 · d08e8f5
1 parent eebf2a3
commit d08e8f5
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 217 deletions.
diff --git a/src/web/components/error/__tests__/__snapshots__/errorcontainer.jsx.snap b/src/web/components/error/__tests__/__snapshots__/errorcontainer.jsx.snap
diff --git a/src/web/components/error/__tests__/__snapshots__/errormessage.jsx.snap b/src/web/components/error/__tests__/__snapshots__/errormessage.jsx.snap
diff --git a/src/web/components/error/__tests__/errorcontainer.jsx b/src/web/components/error/__tests__/errorcontainer.jsx
@@ -29,6 +29,6 @@ describe('ErrorContainer tests', () => {
       </ErrorContainer>,
     );
 
-    expect(element).toMatchSnapshot();
+    expect(element).toBeVisible();
   });
 });
diff --git a/src/web/components/error/__tests__/errormessage.jsx b/src/web/components/error/__tests__/errormessage.jsx
@@ -27,7 +27,7 @@ describe('ErrorMessage tests', () => {
       <ErrorMessage message="An error occurred." details="Because of foo." />,
     );
 
-    expect(element).toMatchSnapshot();
+    expect(element).toBeVisible();
   });
 
   test('should render with message, details and children', () => {

diff --git a/src/web/components/error/errorcontainer.jsx b/src/web/components/error/errorcontainer.jsx
@@ -25,10 +25,7 @@ const ErrorContainer = styled(Layout)`
   padding: 15px;
   margin: 15px 15px 15px 15px;
   border: 1px solid ${Theme.mediumLightRed};
-  color: ${Theme.darkRed};
   background-color: ${Theme.lightRed};
 `;
 
 export default ErrorContainer;
-
-// vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/components/error/errormessage.jsx b/src/web/components/error/errormessage.jsx
@@ -22,7 +22,8 @@ import {isDefined} from 'gmp/utils/identity';
 import Divider from 'web/components/layout/divider';
 import Layout from 'web/components/layout/layout';
 
-import StNonAvailableIcon from 'web/components/icon/stnonavailableicon';
+import {AlertCircle} from 'lucide-react';
+import Theme from 'web/utils/theme';
 
 import PropTypes from 'web/utils/proptypes';
 
@@ -36,13 +37,15 @@ const ErrorMessage = ({
   ...props
 }) => (
   <ErrorContainer data-testid={dataTestId}>
-    <Divider margin="15px" align={['start', 'start']}>
-      <StNonAvailableIcon size="medium" />
-      <Layout {...props}>
-        <Divider>
-          <b data-testid="error-message">{message}</b>
+    <Divider margin="20px" flex="column" align={['center', 'center']} grow>
+      <AlertCircle size="24" color={Theme.darkRed} />
+      <Layout flex="column" align={['center', 'center']} {...props}>
+        <b data-testid="error-message">{message}</b>
+        <Divider margin="20px" flex="row" align={['center', 'start']} grow>
           {isDefined(details) && (
-            <span data-testid="error-details">{details}</span>
+            <div>
+              <span data-testid="error-details">{details}</span>
+            </div>
           )}
         </Divider>
         {children}

diff --git a/src/web/components/error/errorpanel.jsx b/src/web/components/error/errorpanel.jsx
@@ -30,14 +30,7 @@ import PropTypes from 'web/utils/proptypes';
 import Theme from 'web/utils/theme';
 
 import ErrorMessage from './errormessage';
-
-const ErrorDetailsToggle = styled.span`
-  margin-top: 10px;
-  cursor: pointer;
-  :hover {
-    text-decoration: underline;
-  }
-`;
+import {Button as OpenSightButton} from '@greenbone/opensight-ui-components';
 
 const ErrorDetails = styled.div`
   margin-top: 10px;
@@ -61,12 +54,15 @@ const ErrorPanel = ({error, message, info}) => {
       flex="column"
     >
       {isDefined(error) && (
-        <ErrorDetailsToggle
+        <OpenSightButton
+          variant="outline"
+          color="red"
+          size="sm"
           data-testid="errorpanel-toggle"
           onClick={handleToggleDetails}
         >
           {showDetails ? _('Hide Error Details') : _('Show Error Details')}
-        </ErrorDetailsToggle>
+        </OpenSightButton>
       )}
       {showDetails && (
         <ErrorDetails>

diff --git a/src/web/utils/theme.jsx b/src/web/utils/theme.jsx
@@ -34,7 +34,7 @@ const Theme = {
   loginButtonGray: '#4c4c4d', // used by: login button
   loginButtonHover: '#212121', // used by: login button at hover
 
-  lightRed: '#fbddde', // used by: dialog errors background
+  lightRed: '#fdf2f2', // used by: dialog errors background
   mediumLightRed: '#f4b1b2', // used by: dialog errors border
   warningRed: '#e5393d', // used for warning font color at login dialog
   darkRed: '#c12c30', // used by: dialog errors font
@@ -73,5 +73,3 @@ const Theme = {
 };
 
 export default Theme;
-
-// vim: set ts=2 sw=2 tw=80: