Refactor AB#49: Enhanced reponsivity from ErrorResult component

Author: allanalves23

src/pages/Articles/ErrorResult.jsx

@@ -1,12 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {Box, Button, Icon, Typography} from '@material-ui/core';
+import {Box, Button, Typography} from '@material-ui/core';
 
-import {SampleContainer} from './styles';
+import {
+  SampleContainer,
+  ArticleErrorResultIconContainer,
+  ArticleErrorResultIcon,
+  ArticleErrorResultMessageContainer,
+} from './styles';
 
 const ErrorResult = (props) => {
-  const {visible} = props;
+  const {visible, message} = props;
 
   return (
     <SampleContainer item xs={12} visible={visible.toString()}>
@@ -25,20 +30,14 @@ const ErrorResult = (props) => {
           m={2}
         >
           <Box display="flex" alignItems="center" flexWrap="wrap">
-            <Box
-              display="flex"
-              justifyContent="center"
-              alignItems="center"
-              className="error-icon-area"
-            >
-              <Icon color="primary" className="error-icon">healing</Icon>
-            </Box>
-            <Box display="flex" justifyContent="center" alignItems="center">
-              <Typography component="h2" variant="h4">
-                Ops! ocorreu um erro ao buscar nossos artigos.
-                Já tentou atualizar a página?
+            <ArticleErrorResultIconContainer>
+              <ArticleErrorResultIcon color="primary">healing</ArticleErrorResultIcon>
+            </ArticleErrorResultIconContainer>
+            <ArticleErrorResultMessageContainer>
+              <Typography component="h2" variant="h5">
+                {message}
               </Typography>
-            </Box>
+            </ArticleErrorResultMessageContainer>
           </Box>
           <Box display="flex" flexDirection="column" width="100%" mt={3}>
             <Button
@@ -57,7 +56,7 @@ const ErrorResult = (props) => {
               variant="contained"
               onClick={() => window.location.href = '/sobre#contact'}
             >
-                Reportar bug
+              Fale conosco
             </Button>
           </Box>
         </Box>
@@ -68,10 +67,13 @@ const ErrorResult = (props) => {
 
 ErrorResult.propTypes = {
   visible: PropTypes.bool,
+  message: PropTypes.string,
 };
 
-ErrorResult.defaultProp = {
+ErrorResult.defaultProps = {
   visible: false,
+  message: `Ops! ocorreu um erro ao buscar nossos artigos.
+  Já tentou atualizar a página?`,
 };
 
 export default ErrorResult;

src/pages/Articles/styles/index.js

@@ -165,6 +165,13 @@ export const ArticleTextContentPlaceholder = styled(Box)({
   minHeight: '600px',
 });
 
+export const ArticleTextContentErrorResultContainer = styled(Box)({
+  minHeight: '650px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
 export const ArticleFooterContainer = styled(Grid)({
   display: 'flex',
   alignItems: 'center',
@@ -179,3 +186,32 @@ export const ArticleFooterIconButton = styled(FontAwesomeIcon)({
     color: (props) => props.state === 'disabled' ? COLORS.disabled : COLORS.primaryHovered,
   },
 });
+
+export const ArticleErrorResultIconContainer = styled(Box)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  margin: 4,
+  fontSize: '3rem',
+  [devices.laptop]: {
+    width: '100%',
+    marginTop: 25,
+    marginBottom: 25,
+  },
+});
+
+export const ArticleErrorResultIcon = styled(NoResultIcon)({
+  fontSize: '3rem',
+});
+
+export const ArticleErrorResultMessageContainer = styled(Box)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textAlign: 'center',
+  [devices.laptop]: {
+    width: '100%',
+    marginTop: 20,
+    marginBottom: 20,
+  },
+});