feat(16355): remove error image and adjust error styles

src/components/ErrorMessage/ErrorMessage.module.css

@@ -1,14 +1,7 @@
-.spinner {
+.errorContainer {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
-  margin: 2em;
+  margin: calc(var(--double-unit) * 2) var(--double-unit);
   text-align: center;
 }
-
-.icon {
-  display: block;
-  width: 100px;
-  height: 100px;
-  margin: 1em;
-}

src/components/ErrorMessage/ErrorMessage.tsx

@@ -1,19 +1,18 @@
 import { Text } from '@konturio/ui-kit';
+import clsx from 'clsx';
 import { i18n } from '~core/localization';
-import errorImage from './error-state-img.png';
 import s from './ErrorMessage.module.css';
 
 export function ErrorMessage({
   message,
-  marginTop = '30%',
+  containerClass,
 }: {
   message?: string;
-  marginTop?: string;
+  containerClass?: string;
 }) {
   return (
-    <div className={s.spinner} style={{ marginTop }}>
+    <div className={clsx(s.errorContainer, containerClass)}>
       <Text type="short-l">{message ?? i18n.t('errors.default')}</Text>
-      <img src={errorImage} alt="" className={s.icon} />
     </div>
   );
 }

src/features/advanced_analytics_panel/components/AdvancedAnalyticsContainer/AdvancedAnalyticsContainer.module.css

@@ -0,0 +1,3 @@
+.errorContainer {
+  margin-top: 80px;
+}

src/features/advanced_analytics_panel/components/AdvancedAnalyticsContainer/AdvancedAnalyticsContainer.tsx

@@ -7,6 +7,7 @@ import { focusedGeometryAtom } from '~core/focused_geometry/model';
 import { advancedAnalyticsResourceAtom } from '~features/advanced_analytics_panel/atoms/advancedAnalyticsResource';
 import { AdvancedAnalyticsEmptyState } from '~features/advanced_analytics_panel/components/AdvancedAnalyticsEmptyState/AdvancedAnalyticsEmptyState';
 import { AdvancedAnalyticsDataList } from '~features/advanced_analytics_panel/components/AdvancedAnalyticsDataList/AdvancedAnalyticsDataList';
+import s from './AdvancedAnalyticsContainer.module.css';
 
 export const AdvancedAnalyticsContainer = () => {
   const [{ error, loading, data }] = useAtom(advancedAnalyticsResourceAtom);
@@ -21,13 +22,15 @@ export const AdvancedAnalyticsContainer = () => {
   return statesToComponents({
     init: <AdvancedAnalyticsEmptyState />,
     loading: <LoadingSpinner />,
-    error: (errorMessage) => <ErrorMessage message={errorMessage} />,
+    error: (errorMessage) => (
+      <ErrorMessage message={errorMessage} containerClass={s.errorContainer} />
+    ),
     ready: (dataList) => {
       const geometry = focusedGeometry?.geometry as GeoJSON.FeatureCollection;
-      if (geometry.features && geometry.features.length == 0) {
+      if (geometry.features && geometry.features.length === 0) {
         return <AnalyticsEmptyState />;
       }
-      if (dataList?.length == 0) {
+      if (dataList?.length === 0) {
         return <AdvancedAnalyticsEmptyState />;
       }
       return <AdvancedAnalyticsDataList data={dataList} />;

src/features/bivariate_manager/components/BivariateMatrixContainer/BivariateMatrixContainer.tsx

@@ -67,13 +67,11 @@ const BivariateMatrixContainer = ({ className }: BivariateMatrixContainerProps)
               <LoadingSpinner />
             </div>
           ),
-          error: () => (
-            <div className={s.errorContainer}>
-              <ErrorMessage
-                marginTop="0"
-                message={i18n.t('bivariate.matrix.loading_error')}
-              />
-            </div>
+          error: (
+            <ErrorMessage
+              message={i18n.t('bivariate.matrix.loading_error')}
+              containerClass={s.errorContainer}
+            />
           ),
           ready: () => (
             <>

src/features/event_episodes/components/EpisodesTimelinePanel/EpisodesTimelinePanel.tsx

@@ -35,17 +35,13 @@ export function EpisodesTimelinePanel() {
     >
       <div>
         {statesToComponents({
-          loading: (
-            <LoadingSpinner marginTop="16px" message={i18n.t('loading_episodes')} />
-          ),
-          error: (errorMessage) => (
-            <ErrorMessage marginTop="16px" message={errorMessage} />
-          ),
+          loading: <LoadingSpinner message={i18n.t('loading_episodes')} />,
+          error: (errorMessage) => <ErrorMessage message={errorMessage} />,
           ready: (episodes) =>
             episodes.data ? (
               <EpisodesTimeline episodes={episodes.data} />
             ) : (
-              <ErrorMessage marginTop="16px" message={'no_episodes'} />
+              <ErrorMessage message={'no_episodes'} />
             ),
         })}
       </div>

src/features/events_list/components/FullState/FullState.module.css

@@ -11,6 +11,10 @@
   align-items: center;
 }
 
+.errorContainer {
+  margin-top: 80px;
+}
+
 .height100vh {
   height: 100vh;
 }

src/features/events_list/components/FullState/FullState.tsx

@@ -69,7 +69,9 @@ export function FullState({
       <div className={s.scrollable}>
         {statesToComponents({
           loading: <LoadingSpinner message={i18n.t('loading_events')} />,
-          error: (errorMessage) => <ErrorMessage message={errorMessage} />,
+          error: (errorMessage) => (
+            <ErrorMessage message={errorMessage} containerClass={s.errorContainer} />
+          ),
           ready: (eventsList) => (
             <>
               <Virtuoso