@openmrs/esm-styleguide 5.3.3-pre.1286 → 5.3.3-pre.1296

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-@openmrs/esm-styleguide:build: cache hit, replaying output d055face0a00e4c7
+@openmrs/esm-styleguide:build: cache hit, replaying output 27ca0b84a087e919
 @openmrs/esm-styleguide:build: Browserslist: caniuse-lite is outdated. Please run:
 @openmrs/esm-styleguide:build:   npx update-browserslist-db@latest
 @openmrs/esm-styleguide:build:   Why you should do it regularly: https://github.com/browserslist/update-db#readme
@@ -53,4 +53,4 @@
 @openmrs/esm-styleguide:build: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
 @openmrs/esm-styleguide:build: For more info visit https://webpack.js.org/guides/code-splitting/
 @openmrs/esm-styleguide:build: 
-@openmrs/esm-styleguide:build: webpack 5.88.0 compiled with 3 warnings in 16076 ms
+@openmrs/esm-styleguide:build: webpack 5.88.0 compiled with 3 warnings in 15738 ms

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "5.3.3-pre.1286",
+  "version": "5.3.3-pre.1296",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "browser": "dist/openmrs-esm-styleguide.js",
@@ -60,9 +60,9 @@
     "rxjs": "6.x"
   },
   "devDependencies": {
-    "@openmrs/esm-extensions": "5.3.3-pre.1286",
-    "@openmrs/esm-react-utils": "5.3.3-pre.1286",
-    "@openmrs/esm-state": "5.3.3-pre.1286",
+    "@openmrs/esm-extensions": "5.3.3-pre.1296",
+    "@openmrs/esm-react-utils": "5.3.3-pre.1296",
+    "@openmrs/esm-state": "5.3.3-pre.1296",
     "autoprefixer": "^9.8.8",
     "css-minimizer-webpack-plugin": "^1.2.0",
     "i18next": "^21.10.0",

package/src/error-state/error-state.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tile } from '@carbon/react';
+import { Layer, Tile } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useLayoutType } from '@openmrs/esm-react-utils';
 import styles from './error-state.module.scss';
@@ -14,20 +14,22 @@ export const ErrorState: React.FC<ErrorStateProps> = ({ error, headerTitle }) =>
   const isTablet = useLayoutType() === 'tablet';
 
   return (
-    <Tile light className={styles.tile}>
-      <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
-        <h4>{headerTitle}</h4>
-      </div>
-      <p className={styles.errorMessage}>
-        {t('error', 'Error')} {`${error?.response?.status}: `}
-        {error?.response?.statusText}
-      </p>
-      <p className={styles.errorCopy}>
-        {t(
-          'errorCopy',
-          'Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above.',
-        )}
-      </p>
-    </Tile>
+    <Layer>
+      <Tile className={styles.tile}>
+        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+          <h4>{headerTitle}</h4>
+        </div>
+        <p className={styles.errorMessage}>
+          {t('error', 'Error')} {`${error?.response?.status}: `}
+          {error?.response?.statusText}
+        </p>
+        <p className={styles.errorCopy}>
+          {t(
+            'errorCopy',
+            'Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above.',
+          )}
+        </p>
+      </Tile>
+    </Layer>
   );
 };