From c094e303ea6716d8682ca929e095cc797c4e4ace Mon Sep 17 00:00:00 2001
From: endiliey <endiliey@gmail.com>
Date: Mon, 13 May 2019 19:35:40 +0800
Subject: [PATCH] chore(v2): better error message style

---
 .../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 2460dc1b4c25..d1f61182ff87 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={{