From b61cab5e9b3495f1c7d48b4afb979c0ea078652c Mon Sep 17 00:00:00 2001
From: Endi <endiliey@gmail.com>
Date: Mon, 13 May 2019 18:47:57 +0700
Subject: [PATCH] chore(v2): better error message style (#1454)

---
 .../client/theme-fallback/Loading/index.js    | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/docusaurus/src/client/theme-fallback/Loading/index.js b/packages/docusaurus/src/client/theme-fallback/Loading/index.js
index 2460dc1b4c..d1f61182ff 100644
--- a/packages/docusaurus/src/client/theme-fallback/Loading/index.js
+++ b/packages/docusaurus/src/client/theme-fallback/Loading/index.js
@@ -7,13 +7,39 @@
 
 import React from 'react';
 
-export default props => {
-  if (props.error) {
-    console.warn(props.error);
-    return <div align="center">Error</div>;
+export default ({error, retry, pastDelay}) => {
+  if (error) {
+    return (
+      <div
+        style={{
+          align: 'center',
+          color: '#fff',
+          backgroundColor: '#fa383e',
+          borderColor: '#fa383e',
+          borderStyle: 'solid',
+          borderRadius: '0.25rem',
+          borderWidth: '1px',
+          boxSizing: 'border-box',
+          display: 'block',
+          padding: '1rem',
+          flex: '0 0 50%',
+          marginLeft: '25%',
+          marginRight: '25%',
+          marginTop: '5rem',
+          maxWidth: '50%',
+          width: '100%',
+        }}>
+        <p>{error.message}</p>
+        <div>
+          <button type="button" onClick={retry}>
+            Retry
+          </button>
+        </div>
+      </div>
+    );
   }
 
-  if (props.pastDelay) {
+  if (pastDelay) {
     return (
       <div
         style={{