From e34700846d437a3ff07ea8d73ff2bb8b0aa37dc5 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 28 Oct 2020 10:12:23 -0300
Subject: [PATCH 1/2] Add network error Icon

---
 .../FixedIcon/fixedIcon.stories.tsx           |  1 +
 .../FixedIcon/images/networkError.tsx         | 34 +++++++++++++++++++
 src/dataDisplay/FixedIcon/index.tsx           |  2 ++
 3 files changed, 37 insertions(+)
 create mode 100644 src/dataDisplay/FixedIcon/images/networkError.tsx

diff --git a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx
index 58d1a489..f67b6e8c 100644
--- a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx
+++ b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx
@@ -50,6 +50,7 @@ export const Icons = (): React.ReactElement => {
     'creatingInProgress',
     'notOwner',
     'notConnected',
+    'networkError',
   ];
 
   return (
diff --git a/src/dataDisplay/FixedIcon/images/networkError.tsx b/src/dataDisplay/FixedIcon/images/networkError.tsx
new file mode 100644
index 00000000..a0be7611
--- /dev/null
+++ b/src/dataDisplay/FixedIcon/images/networkError.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+const icon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="90"
+    height="90"
+    viewBox="0 0 90 90">
+    <g fill="none" fillRule="evenodd">
+      <circle cx="45" cy="45" r="45" fill="#E8E7E6" />
+      <path
+        fill="#B2B5B2"
+        fillRule="nonzero"
+        d="M26.24 62c-.57 0-1.13-.15-1.623-.437a3.254 3.254 0 0 1-1.18-4.44l18.76-32.501a3.234 3.234 0 0 1 5.606 0l18.761 32.501c.286.495.436 1.057.436 1.628A3.244 3.244 0 0 1 63.76 62H26.24z"
+      />
+      <path
+        fill="#E8E7E6"
+        fillRule="nonzero"
+        d="M47 49h-4V36h4zM47 55h-4v-4h4z"
+      />
+      <circle
+        cx="78"
+        cy="78"
+        r="11"
+        fill="#FFC05F"
+        fillRule="nonzero"
+        stroke="#F7F5F5"
+        strokeWidth="4"
+      />
+    </g>
+  </svg>
+);
+
+export default icon;
diff --git a/src/dataDisplay/FixedIcon/index.tsx b/src/dataDisplay/FixedIcon/index.tsx
index ac3248d8..0430bdc2 100644
--- a/src/dataDisplay/FixedIcon/index.tsx
+++ b/src/dataDisplay/FixedIcon/index.tsx
@@ -20,6 +20,7 @@ import settingsChange from './images/settingsChange';
 import creatingInProgress from './images/creatingInProgress';
 import notOwner from './images/notOwner';
 import notConnected from './images/notConnected';
+import networkError from './images/networkError';
 
 const icons = {
   arrowSort,
@@ -42,6 +43,7 @@ const icons = {
   creatingInProgress,
   notOwner,
   notConnected,
+  networkError,
 };
 
 export type IconType = typeof icons;

From 407264590601f120c484d7408b3ef78578fbaba3 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 28 Oct 2020 10:12:40 -0300
Subject: [PATCH 2/2] Button: Add space between icon and text

---
 src/inputs/Button/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/inputs/Button/index.tsx b/src/inputs/Button/index.tsx
index f669e675..8a775963 100644
--- a/src/inputs/Button/index.tsx
+++ b/src/inputs/Button/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ButtonMUI from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
+import styled from 'styled-components';
 
 import theme, { ThemeButtonSize } from '../../theme';
 import { Icon, IconType } from '../../dataDisplay/Icon';
@@ -15,6 +16,10 @@ export interface Props extends React.ComponentPropsWithoutRef<'button'> {
 
 type HoverColor = 'primaryHover' | 'secondaryHover' | 'errorHover';
 
+const StyledIcon = styled(Icon)`
+  margin-right: 5px;
+`;
+
 const Button = ({
   children,
   iconType,
@@ -53,7 +58,7 @@ const Button = ({
   return (
     <BootstrapButton {...rest}>
       {iconType && (
-        <Icon
+        <StyledIcon
           size="md"
           color={variant === 'contained' ? 'white' : color}
           type={iconType}