refactor: use same styles for error messages

dhis2 · Aug 22, 2024 · c840b95 · c840b95
1 parent 81f81f1
commit c840b95
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 46 deletions.
diff --git a/src/components/Item/ItemMessage/MissingPluginMessage.js b/src/components/Item/ItemMessage/MissingPluginMessage.js
@@ -1,34 +1,39 @@
 import i18n from '@dhis2/d2-i18n'
-import { Center } from '@dhis2/ui'
+import { Cover, IconWarning24, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { isPrintMode } from '../../../modules/dashboardModes.js'
 import classes from './styles/ItemMessage.module.css'
 
 const MissingPluginMessage = ({ dashboardMode, pluginName }) => {
     return (
-        <Center>
-            <p className={classes.errorMessage}>
-                {i18n.t('The plugin for rendering this item is not available')}
-            </p>
-            {!isPrintMode(dashboardMode) ? (
-                <p className={classes.appLink}>
-                    <a
-                        onClick={(e) => e.stopPropagation()}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        href="/dhis-web-app-management/index.html#/app-hub"
-                    >
-                        {i18n.t(
-                            'Install the {{pluginName}} plugin from the App Hub',
-                            {
-                                pluginName,
-                            }
-                        )}
-                    </a>
-                </p>
-            ) : null}
-        </Center>
+        <Cover>
+            <div className={classes.messageContent}>
+                <IconWarning24 color={colors.grey500} />
+                <span>
+                    {i18n.t(
+                        'The plugin for rendering this item is not available'
+                    )}
+                </span>
+                {!isPrintMode(dashboardMode) ? (
+                    <span className={classes.appLink}>
+                        <a
+                            onClick={(e) => e.stopPropagation()}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            href="/dhis-web-app-management/index.html#/app-hub"
+                        >
+                            {i18n.t(
+                                'Install the {{pluginName}} plugin from the App Hub',
+                                {
+                                    pluginName,
+                                }
+                            )}
+                        </a>
+                    </span>
+                ) : null}
+            </div>
+        </Cover>
     )
 }
 

diff --git a/src/components/Item/ItemMessage/VisualizationErrorMessage.js b/src/components/Item/ItemMessage/VisualizationErrorMessage.js
@@ -1,6 +1,6 @@
 import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { colors } from '@dhis2/ui'
+import { Cover, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { isPrintMode } from '../../../modules/dashboardModes.js'
@@ -34,13 +34,13 @@ const VisualizationErrorMessage = ({
     )}`
 
     return (
-        <div className={classes.center}>
+        <Cover>
             {getErrorIcon()}
-            <p className={classes.errorMessage}>
+            <span>
                 {i18n.t('There was an error loading data for this item')}
-            </p>
+            </span>
             {!isPrintMode(dashboardMode) ? (
-                <p className={classes.appLink}>
+                <span className={classes.appLink}>
                     <a
                         onClick={(e) => e.stopPropagation()}
                         target="_blank"
@@ -51,9 +51,9 @@ const VisualizationErrorMessage = ({
                             appName: getAppName(itemType),
                         })}
                     </a>
-                </p>
+                </span>
             ) : null}
-        </div>
+        </Cover>
     )
 }
 

diff --git a/src/components/Item/ItemMessage/styles/ItemMessage.module.css b/src/components/Item/ItemMessage/styles/ItemMessage.module.css
@@ -1,23 +1,22 @@
-.center {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-}
-
-.errorMessage {
-    margin-top: var(--spacers-dp48);
-    margin-bottom: var(--spacers-dp8);
-    font-size: 16px;
-    font-weight: 600;
-}
-
 .appLink {
-    font-size: 16px;
     margin-top: var(--spacers-dp8);
 }
 
 .appLink a {
     color: var(--colors-grey700);
 }
+
+.messageContent {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacers-dp8);
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0.92);
+    font-size: 13px;
+    font-stretch: normal;
+    color: var(--colors-grey900);
+    text-align: center;
+}