Skip to content
Snippets Groups Projects
Unverified Commit 34a3c514 authored by Samuel Couillard's avatar Samuel Couillard Committed by GitHub
Browse files

Improve error pages layout (#4049)

parent 3419be76
No related branches found
No related tags found
No related merge requests found
import React from 'react';
import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
import {
Card, Col, Container, Row,
Card, Container,
} from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import Logo from '../shared_components/Logo';
import ButtonLink from '../shared_components/utilities/ButtonLink';
export default function DefaultErrorPage() {
const { t } = useTranslation();
return (
<Container className="no-header-height">
<Row className="vertical-center text-center">
<Row className="mb-2">
<h1>{t('global_error_page.title')}</h1>
</Row>
<Row>
<Col md={8} className="mx-auto">
<Card className="p-5 border-0 shadow-sm">
<ExclamationCircleIcon className="hi-xxl mx-auto" />
<pre className="text-muted">
{t('global_error_page.message')}
</pre>
<div className="vertical-center">
<div className="text-center pb-4">
<Logo size="medium" />
</div>
<Card className="col-md-4 mx-auto p-4 border-0 shadow-sm text-center">
<Card.Title className="pb-2 fs-1 text-danger">{ t('global_error_page.title') }</Card.Title>
<span className="mb-3">{ t('global_error_page.message') }</span>
<ButtonLink to="/" variant="brand" className="btn btn-lg m-2">
{t('return_home')}
</ButtonLink>
</Card>
</Col>
</Row>
</Row>
</div>
</Container>
);
}
import React from 'react';
import { XCircleIcon } from '@heroicons/react/24/outline';
import {
Card, Col, Row,
Card,
} from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import Logo from '../shared_components/Logo';
import ButtonLink from '../shared_components/utilities/ButtonLink';
export default function NotFoundPage() {
const { t } = useTranslation();
return (
<Row className="vertical-center text-center">
<Row className="mb-2">
<h1>{t('not_found_error_page.title')}</h1>
</Row>
<Row>
<Col md={8} className="mx-auto">
<Card className="p-5 border-0 shadow-sm">
<XCircleIcon className="hi-xxl mx-auto" />
<pre className="text-muted">
{t('not_found_error_page.message')}
</pre>
<div className="vertical-center">
<div className="text-center pb-4">
<Logo size="medium" />
</div>
<Card className="col-md-4 mx-auto p-4 border-0 shadow-sm text-center">
<Card.Title className="pb-2 fs-1 text-danger">{ t('not_found_error_page.title') }</Card.Title>
<span className="mb-3">{ t('not_found_error_page.message') }</span>
<ButtonLink to="/" variant="brand" className="btn btn-lg m-2">
{t('return_home')}
</ButtonLink>
</Card>
</Col>
</Row>
</Row>
</div>
);
}
......@@ -21,6 +21,7 @@
"need_help": "Need help?",
"powered_by": "Powered by ",
"are_you_sure": "Are you sure?",
"return_home": "Return Home",
"created_at": "Created at",
"homepage": {
"welcome_bbb": "Welcome to BigBlueButton.",
......@@ -351,12 +352,12 @@
}
},
"global_error_page": {
"title": "Something Went Wrong",
"message": "Looks like something went wrong on our end.\nPlease try again.\nIf the error is reoccurring, kindly consider reporting the incident to the administrator(s)."
"title": "Error",
"message": "Oops! Something went wrong. If the incident occurs again, please contact the administrator."
},
"not_found_error_page": {
"title": "404",
"message": "The resource you are trying to access cannot be found.\nMaybe you were looking for something else?"
"message": "Oops! The page you are trying to access can't be found."
},
"account_activation_page": {
"title": "Account Activation",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment