feat: add theme palette to `AppErrorPage` (#36321)

pull/35884/head^2
Júlia Jaeger Foresti 6 months ago committed by GitHub
parent a4a00175d5
commit f65f5ab5b0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 5
      .changeset/big-bees-crash.md
  2. 52
      apps/meteor/client/views/root/AppErrorPage.tsx

@ -0,0 +1,5 @@
---
'@rocket.chat/meteor': minor
---
Adds theme palette to Application error page

@ -1,4 +1,5 @@
import { Box, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
import { Box, PaletteStyleTag, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
import { useThemeMode } from '@rocket.chat/ui-theming';
import type { ErrorInfo, ReactElement } from 'react';
type AppErrorPageProps = {
@ -8,30 +9,35 @@ type AppErrorPageProps = {
};
const AppErrorPage = (_props: AppErrorPageProps): ReactElement => {
const [, , theme] = useThemeMode();
return (
<Box display='flex' justifyContent='center' height='full' backgroundColor='surface'>
<States>
<StatesIcon name='error-circle' />
<StatesTitle>Application Error</StatesTitle>
<StatesSubtitle>The application GUI just crashed.</StatesSubtitle>
<>
<PaletteStyleTag theme={theme} tagId='app-error-palette' />
<Box display='flex' justifyContent='center' height='full' backgroundColor='surface'>
<States>
<StatesIcon name='error-circle' />
<StatesTitle>Application Error</StatesTitle>
<StatesSubtitle>The application GUI just crashed.</StatesSubtitle>
<StatesActions>
<StatesAction
onClick={() => {
const result = indexedDB.deleteDatabase('MeteorDynamicImportCache');
result.onsuccess = () => {
window.location.reload();
};
result.onerror = () => {
window.location.reload();
};
}}
>
Reload Application
</StatesAction>
</StatesActions>
</States>
</Box>
<StatesActions>
<StatesAction
onClick={() => {
const result = indexedDB.deleteDatabase('MeteorDynamicImportCache');
result.onsuccess = () => {
window.location.reload();
};
result.onerror = () => {
window.location.reload();
};
}}
>
Reload Application
</StatesAction>
</StatesActions>
</States>
</Box>
</>
);
};

Loading…
Cancel
Save