From a6af043686e4375d7944e91cae3d5b63c59edab0 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 22 Mar 2018 16:29:31 -0400
Subject: Migrate to render props

---
 frontend/components/ErrorMessage.js | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

(limited to 'frontend/components/ErrorMessage.js')

diff --git a/frontend/components/ErrorMessage.js b/frontend/components/ErrorMessage.js
index 12de51d..ed5d031 100644
--- a/frontend/components/ErrorMessage.js
+++ b/frontend/components/ErrorMessage.js
@@ -4,29 +4,34 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const StyledError = styled.div`
-  background: pink;
-  border: 2px solid red;
-  padding: 20px;
-  display: flex;
+  padding: 2rem;
+  background: white;
+  margin: 2rem 0;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-left: 5px solid red;
   p {
     margin: 0;
-    flex: 1 0 auto;
+    font-weight: 100;
+  }
+  strong {
+    margin-right: 1rem;
   }
 `;
 
-const DisplayError = props => {
-  if (!props.error || !props.error.message) return null;
+const DisplayError = ({ error }) => {
+  if (!error || !error.message) return null;
   return (
     <StyledError>
-      <p>{props.error.message}</p>
-      <button onClick={props.onButtonClick}>&times;</button>
+      <p>
+        <strong>Shoot!</strong>
+        {error.message}
+      </p>
     </StyledError>
   );
 };
 
 DisplayError.propTypes = {
-  error: PropTypes.object.isRequired,
-  onButtonClick: PropTypes.func.isRequired,
+  error: PropTypes.object,
 };
 
 export default DisplayError;
-- 
cgit v1.3