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 = ( + + + + + + + + +); + +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; 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 ( {iconType && ( -