Added better error boundary page. Started some CSS and layout refactoring. **Major Changes**.

client/src/components/error-boundary/error-boundary.component.jsx

@@ -1,31 +1,65 @@
 import React from "react";
+import { withTranslation } from "react-i18next";
+import { Result, Button, Collapse, Row, Col, Space } from "antd";
 
 class ErrorBoundary extends React.Component {
   constructor() {
     super();
     this.state = {
       hasErrored: false,
-      error: null
+      error: null,
     };
   }
 
   static getDerivedStateFromError(error) {
-    //process the error
-    console.log("error", error);
     return { hasErrored: true, error };
   }
 
   componentDidCatch(error, info) {
-    console.log("error", error);
-    console.log("info", info);
+    console.log("Exception Caught by Error Boundary.", error, info);
   }
 
   render() {
+    const { t } = this.props;
     if (this.state.hasErrored === true) {
-      return <div>Uh oh, something went wrong.</div>;
+      return (
+        <div>
+          <Result
+            status='500'
+            title={t("general.labels.exceptiontitle")}
+            subTitle={t("general.messages.exception")}
+            extra={
+              <Space>
+                <Button
+                  type='primary'
+                  onClick={() => {
+                    window.location.reload();
+                  }}>
+                  {t("general.actions.refresh")}
+                </Button>
+                <Button
+                  onClick={() => {
+                    alert("Not implemented yet.");
+                  }}>
+                  {t("general.actions.submitticket")}
+                </Button>
+              </Space>
+            }
+          />
+          <Row>
+            <Col offset={6} span={12}>
+              <Collapse bordered={false}>
+                <Collapse.Panel header={t("general.labels.errors")}>
+                  {JSON.stringify(this.state.error || "")}
+                </Collapse.Panel>
+              </Collapse>
+            </Col>
+          </Row>
+        </div>
+      );
     } else {
       return this.props.children;
     }
   }
 }
-export default ErrorBoundary;
+export default withTranslation()(ErrorBoundary);