diff --git a/webapp/packages/core-bootstrap/src/ErrorPage.tsx b/webapp/packages/core-bootstrap/src/ErrorPage.tsx index fd61420a8c..e5c1254c1d 100644 --- a/webapp/packages/core-bootstrap/src/ErrorPage.tsx +++ b/webapp/packages/core-bootstrap/src/ErrorPage.tsx @@ -8,17 +8,63 @@ import { useCallback } from 'react'; import ReactDOM from 'react-dom'; +import styled, { css } from 'reshadow'; + +import { useAppLoadingSreen } from '@cloudbeaver/core-blocks'; + +interface IRefreshProps { + className?: string; +} + +const ERROR_PAGE_STYLES = css` + container { + width: 100%; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + } + container-inner-block { + display: flex; + flex-direction: column; + align-items: center; + } + Refresh { + color: white; + font-weight: 500; + background-color: #2a7cb4; + padding: 5px 16px; + border-radius: 4px; + letter-spacing: .08929em; + font-size: .875rem; + text-transform: uppercase; + cursor: pointer; + outline: none; + border: none; + &:hover, &:focus { + opacity: 0.8; + } + &:active { + opacity: 0.5; + } + } +`; + +function Refresh({ className }: IRefreshProps) { + useAppLoadingSreen(); -function Refresh() { const handleRefresh = useCallback(() => window.location.reload(), []); - return Refresh; + return ; } export function showErrorPage() { - ReactDOM.render( -
Error occurred while loading the page
+