From 69d5e6f1380167c8ca7fc81fd6a3a20500599fd8 Mon Sep 17 00:00:00 2001 From: HellWolf93 Date: Mon, 28 Sep 2020 00:23:37 -0400 Subject: [PATCH 01/10] feat: implement 'LoadingShape' component fix: #1846 --- .../__test__/loadingShape.spec.js | 21 ++ src/components/LoadingShape/icons/avatar.js | 38 ++++ src/components/LoadingShape/icons/image.js | 38 ++++ src/components/LoadingShape/index.d.ts | 8 + src/components/LoadingShape/index.js | 58 ++++++ src/components/LoadingShape/readme.md | 180 ++++++++++++++++++ src/components/LoadingShape/styled/index.js | 119 ++++++++++++ src/components/index.d.ts | 1 + src/components/index.js | 1 + 9 files changed, 464 insertions(+) create mode 100644 src/components/LoadingShape/__test__/loadingShape.spec.js create mode 100644 src/components/LoadingShape/icons/avatar.js create mode 100644 src/components/LoadingShape/icons/image.js create mode 100644 src/components/LoadingShape/index.d.ts create mode 100644 src/components/LoadingShape/index.js create mode 100644 src/components/LoadingShape/readme.md create mode 100644 src/components/LoadingShape/styled/index.js diff --git a/src/components/LoadingShape/__test__/loadingShape.spec.js b/src/components/LoadingShape/__test__/loadingShape.spec.js new file mode 100644 index 000000000..a64f0b004 --- /dev/null +++ b/src/components/LoadingShape/__test__/loadingShape.spec.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import LoadingShape from '../'; +import { StyledImageIcon, StyledAvatarIcon } from '../styled'; + +describe(' { + it('should have "rounded-rect" as default shape', () => { + const component = mount(); + expect(component.prop('shape')).toBe('rounded-rect'); + }); + + it('should render the image icon when variant is "image"', () => { + const component = mount(); + expect(component.find(StyledImageIcon).length).toBe(1); + }); + + it('should render the user icon when variant is "avatar"', () => { + const component = mount(); + expect(component.find(StyledAvatarIcon).length).toBe(1); + }); +}); diff --git a/src/components/LoadingShape/icons/avatar.js b/src/components/LoadingShape/icons/avatar.js new file mode 100644 index 000000000..e033ac647 --- /dev/null +++ b/src/components/LoadingShape/icons/avatar.js @@ -0,0 +1,38 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const AvatarIcon = props => { + const { className, style } = props; + return ( + + Combined Shape Copy 2 + + + + + + + + + ); +}; + +AvatarIcon.propTypes = { + className: PropTypes.string, + style: PropTypes.object, +}; + +AvatarIcon.defaultProps = { + className: undefined, + style: undefined, +}; + +export default AvatarIcon; diff --git a/src/components/LoadingShape/icons/image.js b/src/components/LoadingShape/icons/image.js new file mode 100644 index 000000000..bf5f99a9d --- /dev/null +++ b/src/components/LoadingShape/icons/image.js @@ -0,0 +1,38 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const ImageIcon = props => { + const { className, style } = props; + return ( + + Combined Shape + + + + + + + + + ); +}; + +ImageIcon.propTypes = { + className: PropTypes.string, + style: PropTypes.object, +}; + +ImageIcon.defaultProps = { + className: undefined, + style: undefined, +}; + +export default ImageIcon; diff --git a/src/components/LoadingShape/index.d.ts b/src/components/LoadingShape/index.d.ts new file mode 100644 index 000000000..3e63586b1 --- /dev/null +++ b/src/components/LoadingShape/index.d.ts @@ -0,0 +1,8 @@ +import { BaseProps } from '../types'; + +export interface LoadingShapeProps extends BaseProps { + variant?: 'solid' | 'image' | 'avatar'; + shape?: 'circle' | 'rect' | 'rounded-rect' | 'square'; +} + +export default function(props: LoadingShapeProps): JSX.Element | null; diff --git a/src/components/LoadingShape/index.js b/src/components/LoadingShape/index.js new file mode 100644 index 000000000..a03c0ebee --- /dev/null +++ b/src/components/LoadingShape/index.js @@ -0,0 +1,58 @@ +import React, { useEffect, useRef } from 'react'; +import PropTypes from 'prop-types'; +import RenderIf from '../RenderIf'; +import { + StyledShapeContainer, + StyledLoadingShape, + StyledImageIcon, + StyledAvatarIcon, +} from './styled'; + +const LoadingShape = props => { + const { className, style, shape, variant } = props; + const shapeRef = useRef(); + const isImage = variant === 'image'; + const isAvatar = variant === 'avatar'; + + useEffect(() => { + const el = shapeRef.current; + if (shape === 'square' || shape === 'circle') { + el.style.width = `${el.offsetHeight}px`; + } else { + el.style.width = '100%'; + } + }); + + return ( + + + + + + + + + + + ); +}; + +LoadingShape.propTypes = { + /** A CSS class for the outer element, in addition to the component's base classes. */ + className: PropTypes.string, + /** An object with custom style applied to the outer element. */ + style: PropTypes.object, + /** The shape of the loading placeholder */ + shape: PropTypes.oneOf(['circle', 'rect', 'rounded-rect', 'square']), + /** The variant of the loading placeholder */ + variant: PropTypes.oneOf(['solid', 'image', 'avatar']), +}; + +LoadingShape.defaultProps = { + className: undefined, + style: undefined, + shape: 'rounded-rect', + variant: 'solid', +}; + +export default LoadingShape; diff --git a/src/components/LoadingShape/readme.md b/src/components/LoadingShape/readme.md new file mode 100644 index 000000000..73542f314 --- /dev/null +++ b/src/components/LoadingShape/readme.md @@ -0,0 +1,180 @@ +##### LoadingShape solid + +```js +const style = { + width: '400px', + display: 'flex', + justifyContent: 'space-evenly', +}; +const circleStyle = { width: '50px', height: '50px' }; +const squareStyle = { height: '50px' }; +const rectStyle = { height: '30px', width: '100px', }; +const roundedStyle = { height: '30px', width: '100px', }; + +
+
+
+ +
+ circle +
+ +
+
+ +
+ square +
+ +
+
+ +
+ rect +
+ +
+
+ +
+ rounded-rect +
+
+``` + +##### LoadingShape circle + +```js +const style = { width: '300px' }; +const shapeStyle = { width: '50px', height: '50px' }; + +
+
+
+
+ +
+ solid +
+ +
+
+ +
+ avatar +
+ +
+
+ +
+ image +
+
+
+``` + + +##### LoadingShape interactive example + +```js +import React, { useState } from 'react'; +import { LoadingShape, RadioGroup, Input } from 'react-rainbow-components'; + +const styles = { + maxWidth: 400, + margin: 'auto', +}; + +const shapeContainerStyles = { + height: '150px', + display: 'flex', + justifyContent: 'center', +} + +const radioContainerStyles = { + display: 'flex', + justifyContent: 'space-evenly', +}; + +const inputStyle = { + width: '150px', +} + +const shapeOptions = [ + { value: 'rounded-rect', label: 'Rounded Rect' }, + { value: 'square', label: 'Square' }, + { value: 'circle', label: 'Circle' }, +]; + +const variantOptions = [ + { value: 'solid', label: 'Solid' }, + { value: 'image', label: 'Image' }, + { value: 'avatar', label: 'Avatar' }, +]; + +const LoadingShapeExample = () => { + const [shape, setShape] = useState('rounded-rect'); + const [variant, setVariant] = useState('solid'); + const [width, setWidth] = useState(300); + const [height, setHeight] = useState(15) + + const shapeStyle = { + height: `${height}px`, + width: `${width}px`, + }; + + const handleShapeChange = (event) => { + setShape(event.target.value); + if (event.target.value === 'circle' || event.target.value === 'square') { + setWidth(75); + setHeight(75); + } else { + setWidth(200); + setHeight(15); + } + }; + + return ( +
+
+ setWidth(event.target.value)} + /> + setHeight(event.target.value)} + /> +
+
+ + setVariant(event.target.value)} + label="Select variant" + /> +
+
+
+ +
+
+
+ ); +} + + +``` \ No newline at end of file diff --git a/src/components/LoadingShape/styled/index.js b/src/components/LoadingShape/styled/index.js new file mode 100644 index 000000000..35c81ca14 --- /dev/null +++ b/src/components/LoadingShape/styled/index.js @@ -0,0 +1,119 @@ +import styled from 'styled-components'; +import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; +import AvatarIcon from '../icons/avatar'; +import ImageIcon from '../icons/image'; + +const StyledShapeContainer = styled.div` + position: relative; + width: 100%; + height: 100%; +`; + +const StyledImageIcon = styled(ImageIcon)` + ${props => + props.shape === 'square' && + ` + width: 85%; + `} + + ${props => + props.shape === 'circle' && + ` + width: 60%; + `} + + ${props => + (props.shape === 'rect' || props.shape === 'rounded-rect') && + ` + max-width: 25%; + height: 80%; + `} +`; + +const StyledAvatarIcon = styled(AvatarIcon)` + ${props => + props.shape === 'square' && + ` + width: 85%; + `} + + ${props => + props.shape === 'circle' && + ` + width: 60%; + `} + + ${props => + (props.shape === 'rect' || props.shape === 'rounded-rect') && + ` + max-width: 25%; + height: 80%; + `} +`; + +const StyledLoadingShape = attachThemeAttrs(styled.div)` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + background: ${props => props.palette.background.secondary} + linear-gradient( + 90deg, + rgba(226, 228, 233, 0.01) 0%, + rgba(226, 228, 233, 0.85) 50%, + rgba(226, 228, 233, 0.01) 100% + ); + background-size: 400% 400%; + animation: gradient 2.5s ease-in-out infinite; + + @keyframes gradient { + 0% { + background-position: 14% 0; + } + + 50% { + background-position: 87% 100%; + } + + 100% { + background-position: 14% 0; + } + } + + ${props => + (props.shape === 'rect' || props.shape === 'rounded-rect') && + ` + min-height: 20px; + min-width: 92px; + height: 100%; + `} + + ${props => + (props.shape === 'circle' || props.shape === 'square') && + ` + min-width: 48px; + min-height: 48px; + `} + + ${props => + (props.variant === 'image' || props.variant === 'avatar') && + ` + min-width: 48px; + min-height: 48px; + `} + + ${props => + props.shape === 'rounded-rect' && + ` + border-radius: 1rem; + `} + + ${props => + props.shape === 'circle' && + ` + border-radius: 50%; + `} +`; + +export { StyledShapeContainer, StyledImageIcon, StyledAvatarIcon, StyledLoadingShape }; diff --git a/src/components/index.d.ts b/src/components/index.d.ts index b11dc270e..d89e1e327 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -39,6 +39,7 @@ export { default as GoogleAddressLookup } from './GoogleAddressLookup'; export { default as HelpText } from './HelpText'; export { default as ImportRecordsFlow } from './ImportRecordsFlow'; export { default as Input } from './Input'; +export { default as LoadingShape } from './LoadingShape'; export { default as Lookup } from './Lookup'; export { default as MapMarker } from './MapMarker'; export { default as MarkdownOutput } from './MarkdownOutput'; diff --git a/src/components/index.js b/src/components/index.js index b831a3466..4c78e87d4 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -37,6 +37,7 @@ export { default as GoogleAddressLookup } from './GoogleAddressLookup'; export { default as HelpText } from './HelpText'; export { default as ImportRecordsFlow } from './ImportRecordsFlow'; export { default as Input } from './Input'; +export { default as LoadingShape } from './LoadingShape'; export { default as Lookup } from './Lookup'; export { default as MapMarker } from './MapMarker'; export { default as MarkdownOutput } from './MarkdownOutput'; From 80b3d0e3fd355af79f703b1b780c342a98524520 Mon Sep 17 00:00:00 2001 From: HellWolf93 Date: Wed, 30 Sep 2020 17:42:39 -0400 Subject: [PATCH 02/10] fix: change rect and rouded rect min-height --- src/components/LoadingShape/styled/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LoadingShape/styled/index.js b/src/components/LoadingShape/styled/index.js index 35c81ca14..935f4ef16 100644 --- a/src/components/LoadingShape/styled/index.js +++ b/src/components/LoadingShape/styled/index.js @@ -84,7 +84,7 @@ const StyledLoadingShape = attachThemeAttrs(styled.div)` ${props => (props.shape === 'rect' || props.shape === 'rounded-rect') && ` - min-height: 20px; + min-height: 12px; min-width: 92px; height: 100%; `} From b682fe1d36fe829dbe0fb6f2c363b03cd56bf342 Mon Sep 17 00:00:00 2001 From: HellWolf93 Date: Sat, 3 Oct 2020 17:28:04 -0400 Subject: [PATCH 03/10] fix: add LoadingShape component description --- src/components/LoadingShape/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/LoadingShape/index.js b/src/components/LoadingShape/index.js index a03c0ebee..0242921bc 100644 --- a/src/components/LoadingShape/index.js +++ b/src/components/LoadingShape/index.js @@ -8,6 +8,10 @@ import { StyledAvatarIcon, } from './styled'; +/** + * LoadingShape can be used to display a placeholder where content + * is being loaded asynchronously. + */ const LoadingShape = props => { const { className, style, shape, variant } = props; const shapeRef = useRef(); From 40df08bbf4673f693086f2af48b08cd1d38855ab Mon Sep 17 00:00:00 2001 From: HellWolf93 Date: Sun, 4 Oct 2020 00:02:11 -0400 Subject: [PATCH 04/10] fix: change interactive example input type --- src/components/LoadingShape/readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/LoadingShape/readme.md b/src/components/LoadingShape/readme.md index 73542f314..2452450ac 100644 --- a/src/components/LoadingShape/readme.md +++ b/src/components/LoadingShape/readme.md @@ -142,6 +142,7 @@ const LoadingShapeExample = () => { label="Width" className="rainbow-p-around_small" style={inputStyle} + type="number" value={width} onChange={event => setWidth(event.target.value)} /> @@ -149,6 +150,7 @@ const LoadingShapeExample = () => { label="Height" className="rainbow-p-around_small" style={inputStyle} + type="number" value={height} onChange={event => setHeight(event.target.value)} /> From 056f6d5c61516a90d50e427ba4e6f240e7399d88 Mon Sep 17 00:00:00 2001 From: HellWolf93 Date: Sun, 4 Oct 2020 00:02:52 -0400 Subject: [PATCH 05/10] fix: make SCG icons fill currentColor --- src/components/LoadingShape/icons/avatar.js | 2 +- src/components/LoadingShape/icons/image.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/LoadingShape/icons/avatar.js b/src/components/LoadingShape/icons/avatar.js index e033ac647..048302b3c 100644 --- a/src/components/LoadingShape/icons/avatar.js +++ b/src/components/LoadingShape/icons/avatar.js @@ -10,7 +10,7 @@ const AvatarIcon = props => { diff --git a/src/components/LoadingShape/icons/image.js b/src/components/LoadingShape/icons/image.js index bf5f99a9d..1f6d38929 100644 --- a/src/components/LoadingShape/icons/image.js +++ b/src/components/LoadingShape/icons/image.js @@ -10,7 +10,7 @@ const ImageIcon = props => { From 1166ed9a2d72504fafb09ee62fdc1c2d0a002a96 Mon Sep 17 00:00:00 2001 From: HellWolf93 Date: Sun, 4 Oct 2020 00:15:38 -0400 Subject: [PATCH 06/10] fix: some changes in styles --- src/components/LoadingShape/styled/index.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/LoadingShape/styled/index.js b/src/components/LoadingShape/styled/index.js index 935f4ef16..84401e657 100644 --- a/src/components/LoadingShape/styled/index.js +++ b/src/components/LoadingShape/styled/index.js @@ -1,5 +1,7 @@ import styled from 'styled-components'; import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; +import { replaceAlpha } from '../../../styles/helpers/color'; +import darken from '../../../styles/helpers/color/darken'; import AvatarIcon from '../icons/avatar'; import ImageIcon from '../icons/image'; @@ -9,7 +11,8 @@ const StyledShapeContainer = styled.div` height: 100%; `; -const StyledImageIcon = styled(ImageIcon)` +const StyledImageIcon = attachThemeAttrs(styled(ImageIcon))` + color: ${props => props.palette.background.main}; ${props => props.shape === 'square' && ` @@ -25,12 +28,12 @@ const StyledImageIcon = styled(ImageIcon)` ${props => (props.shape === 'rect' || props.shape === 'rounded-rect') && ` - max-width: 25%; height: 80%; `} `; -const StyledAvatarIcon = styled(AvatarIcon)` +const StyledAvatarIcon = attachThemeAttrs(styled(AvatarIcon))` + color: ${props => props.palette.background.main}; ${props => props.shape === 'square' && ` @@ -46,7 +49,6 @@ const StyledAvatarIcon = styled(AvatarIcon)` ${props => (props.shape === 'rect' || props.shape === 'rounded-rect') && ` - max-width: 25%; height: 80%; `} `; @@ -57,12 +59,12 @@ const StyledLoadingShape = attachThemeAttrs(styled.div)` align-items: center; width: 100%; height: 100%; - background: ${props => props.palette.background.secondary} + background: ${props => props.palette.background.highlight} linear-gradient( 90deg, - rgba(226, 228, 233, 0.01) 0%, - rgba(226, 228, 233, 0.85) 50%, - rgba(226, 228, 233, 0.01) 100% + ${props => replaceAlpha(props.palette.background.highlight, 0.1)} 0%, + ${props => darken(props.palette.background.highlight, 0.1)} 50%, + ${props => replaceAlpha(props.palette.background.highlight, 0.1)} 100% ); background-size: 400% 400%; animation: gradient 2.5s ease-in-out infinite; From ab5f9073776629247811e5d1ae512b10af594e68 Mon Sep 17 00:00:00 2001 From: TahimiLeonBravo Date: Sun, 4 Oct 2020 00:16:35 -0500 Subject: [PATCH 07/10] docs: update icon --- .../images/componentsThumbs/LoadingShape.svg | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/assets/images/componentsThumbs/LoadingShape.svg b/assets/images/componentsThumbs/LoadingShape.svg index e847281ab..83f86755c 100644 --- a/assets/images/componentsThumbs/LoadingShape.svg +++ b/assets/images/componentsThumbs/LoadingShape.svg @@ -3,16 +3,18 @@ LoadingShape - + + - + + - + - + @@ -24,18 +26,18 @@ - - + + - + - + From 5d31d5031f382143f64dac4f92fe23281f5758c4 Mon Sep 17 00:00:00 2001 From: HellWolf93 Date: Sun, 4 Oct 2020 13:23:15 -0400 Subject: [PATCH 08/10] fix: make text color change with the theme --- src/components/LoadingShape/readme.md | 42 ++++++++++++++++++++++----- 1 file changed, 35 insertions(+), 7 deletions(-) diff --git a/src/components/LoadingShape/readme.md b/src/components/LoadingShape/readme.md index 2452450ac..9a103d298 100644 --- a/src/components/LoadingShape/readme.md +++ b/src/components/LoadingShape/readme.md @@ -1,6 +1,20 @@ ##### LoadingShape solid ```js +import React from 'react'; +import { LoadingShape } from 'react-rainbow-components'; +import styled from 'styled-components'; + +const StyledText = styled.div.attrs(props => { + return props.theme.rainbow.palette; +})` + color: ${props => props.text.main}; + font-family: Lato; + font-size: 14px; + line-height: 1.57; + font-weight: bold; +`; + const style = { width: '400px', display: 'flex', @@ -16,28 +30,28 @@ const roundedStyle = { height: '30px', width: '100px', };
- circle + circle
- square + square
- rect + rect
- rounded-rect + rounded-rect
``` @@ -45,6 +59,20 @@ const roundedStyle = { height: '30px', width: '100px', }; ##### LoadingShape circle ```js +import React from 'react'; +import { LoadingShape } from 'react-rainbow-components'; +import styled from 'styled-components'; + +const StyledText = styled.div.attrs(props => { + return props.theme.rainbow.palette; +})` + color: ${props => props.text.main}; + font-family: Lato; + font-size: 14px; + line-height: 1.57; + font-weight: bold; +`; + const style = { width: '300px' }; const shapeStyle = { width: '50px', height: '50px' }; @@ -54,21 +82,21 @@ const shapeStyle = { width: '50px', height: '50px' };
- solid + solid
- avatar + avatar
- image + image
From 9c374307cda8370150cb6f9164788c44d3e8b422 Mon Sep 17 00:00:00 2001 From: TahimiLeonBravo Date: Sun, 4 Oct 2020 13:41:36 -0500 Subject: [PATCH 09/10] docs: add real use case example --- src/components/LoadingShape/icons/avatar.js | 1 - src/components/LoadingShape/icons/image.js | 1 - src/components/LoadingShape/readme.md | 126 +++++--------------- src/components/LoadingShape/styled/index.js | 1 + 4 files changed, 33 insertions(+), 96 deletions(-) diff --git a/src/components/LoadingShape/icons/avatar.js b/src/components/LoadingShape/icons/avatar.js index 048302b3c..06d8488a3 100644 --- a/src/components/LoadingShape/icons/avatar.js +++ b/src/components/LoadingShape/icons/avatar.js @@ -5,7 +5,6 @@ const AvatarIcon = props => { const { className, style } = props; return ( - Combined Shape Copy 2 { const { className, style } = props; return ( - Combined Shape { - return props.theme.rainbow.palette; -})` - color: ${props => props.text.main}; - font-family: Lato; - font-size: 14px; - line-height: 1.57; - font-weight: bold; -`; - -const style = { - width: '400px', - display: 'flex', - justifyContent: 'space-evenly', -}; -const circleStyle = { width: '50px', height: '50px' }; -const squareStyle = { height: '50px' }; -const rectStyle = { height: '30px', width: '100px', }; -const roundedStyle = { height: '30px', width: '100px', }; - -
-
-
- -
- circle -
- -
-
- -
- square -
- -
-
- -
- rect -
+import { Card, LoadingShape } from 'react-rainbow-components'; -
-
- -
- rounded-rect -
-
-``` +const style = { + maxWidth: '400px', + minWidth: '300px', + display: 'flex', + padding: '20px', +}; -##### LoadingShape circle +const imageStyle = { + width: '100px', +}; -```js -import React from 'react'; -import { LoadingShape } from 'react-rainbow-components'; -import styled from 'styled-components'; - -const StyledText = styled.div.attrs(props => { - return props.theme.rainbow.palette; -})` - color: ${props => props.text.main}; - font-family: Lato; - font-size: 14px; - line-height: 1.57; - font-weight: bold; -`; - -const style = { width: '300px' }; -const shapeStyle = { width: '50px', height: '50px' }; - -
-
-
-
- -
- solid +
+ +
+
- -
-
- +
+
+ +
- avatar -
- -
-
- +
+ + +
+ + +
- image
-
+
-``` +``` -##### LoadingShape interactive example +# LoadingShape dynamic example +##### This is a dynamic example where you can play around with the component customization. ```js import React, { useState } from 'react'; @@ -207,4 +145,4 @@ const LoadingShapeExample = () => { } -``` \ No newline at end of file +``` diff --git a/src/components/LoadingShape/styled/index.js b/src/components/LoadingShape/styled/index.js index 84401e657..1d66c5acf 100644 --- a/src/components/LoadingShape/styled/index.js +++ b/src/components/LoadingShape/styled/index.js @@ -13,6 +13,7 @@ const StyledShapeContainer = styled.div` const StyledImageIcon = attachThemeAttrs(styled(ImageIcon))` color: ${props => props.palette.background.main}; + ${props => props.shape === 'square' && ` From 5fc757f168ebc6deb4af43217180b3632586a5c8 Mon Sep 17 00:00:00 2001 From: TahimiLeonBravo Date: Sun, 4 Oct 2020 14:06:57 -0500 Subject: [PATCH 10/10] fix: icon --- .../images/componentsThumbs/LoadingShape.svg | 36 +++++++------------ src/components/LoadingShape/icons/avatar.js | 16 ++++----- 2 files changed, 19 insertions(+), 33 deletions(-) diff --git a/assets/images/componentsThumbs/LoadingShape.svg b/assets/images/componentsThumbs/LoadingShape.svg index 83f86755c..bc549df86 100644 --- a/assets/images/componentsThumbs/LoadingShape.svg +++ b/assets/images/componentsThumbs/LoadingShape.svg @@ -2,44 +2,32 @@ LoadingShape - - - - - - - - - - + + + - + - - - - - - + + + - - + + - - - - + - + + \ No newline at end of file diff --git a/src/components/LoadingShape/icons/avatar.js b/src/components/LoadingShape/icons/avatar.js index 06d8488a3..59ef4142c 100644 --- a/src/components/LoadingShape/icons/avatar.js +++ b/src/components/LoadingShape/icons/avatar.js @@ -4,20 +4,18 @@ import PropTypes from 'prop-types'; const AvatarIcon = props => { const { className, style } = props; return ( - - + + - - - +