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

src/components/ErrorMessage/ErrorMessage.tsx

@@ -1,19 +1,17 @@
 import { Text } from '@konturio/ui-kit';
 import { i18n } from '~core/localization';
-import errorImage from './error-state-img.png';
 import s from './ErrorMessage.module.css';
 
 export function ErrorMessage({
   message,
-  marginTop = '30%',
+  margin = '32px 16px',
 }: {
   message?: string;
-  marginTop?: string;
+  margin?: string;
 }) {
   return (
-    <div className={s.spinner} style={{ marginTop }}>
+    <div className={s.spinner} style={{ margin }}>
       <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.tsx

@@ -21,13 +21,15 @@ export const AdvancedAnalyticsContainer = () => {
   return statesToComponents({
     init: <AdvancedAnalyticsEmptyState />,
     loading: <LoadingSpinner />,
-    error: (errorMessage) => <ErrorMessage message={errorMessage} />,
+    error: (errorMessage) => (
+      <ErrorMessage message={errorMessage} margin="80px auto 60px" />
+    ),
     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/analytics_panel/components/AnalyticsContainer/AnalyticsContainer.tsx

@@ -20,7 +20,7 @@ export const AnalyticsContainer = () => {
   return statesToComponents({
     init: <AnalyticsEmptyState />,
     loading: <LoadingSpinner />,
-    error: (errorMessage) => <ErrorMessage message={errorMessage} />,
+    error: (errorMessage) => <ErrorMessage message={errorMessage} margin="32px 0 25px" />,
     ready: (dataList) => {
       const geometry = focusedGeometry?.geometry;
       if (

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

@@ -69,10 +69,7 @@ const BivariateMatrixContainer = ({ className }: BivariateMatrixContainerProps)
           ),
           error: () => (
             <div className={s.errorContainer}>
-              <ErrorMessage
-                marginTop="0"
-                message={i18n.t('bivariate.matrix.loading_error')}
-              />
+              <ErrorMessage message={i18n.t('bivariate.matrix.loading_error')} />
             </div>
           ),
           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.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} margin="70px 16px 32px" />
+          ),
           ready: (eventsList) => (
             <>
               <Virtuoso