I am trying to use the diamond shape but it's converted into a square. Actually, I am using className prop on the component for adding some cool animations. It stays for some time as a diamond and then it jumps back to square as shown in the image below!

Fixes #2 This PR will include the following changes

• Adding types package for react-responsive
• Fixing Hook being called in loop issue.

cc: @ashutosh1919

React Hook "useMediaQuery" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render

@ashutosh1919 , please assign this to me.

I work on fixing issue #45 which converts diamond shape in to square shape on animation. Closes #45

Working example:- Please look right top corner for diamond shape

https://user-images.githubusercontent.com/71748675/158029836-3b14c96e-202a-4159-9eba-70326f7e4a66.mov

@Sachin-chaurasiya @Spyware007 @ashutosh1919

Currently, we have typescript types in all the files, we should move out those and keep them in a single file and use it from there. Also, instead of type make it interface.

#85 Hi there I was working on this issue and I found out that to fix it I have to make some changes:

those changes will affect the homepage shapes positions so please don't merge until repositioned the shapes

1. Remove some css properties from StyledShape component [ position, top, bottom, left, & right] which inherit their values from the parent (BaseShape).
2. Set zIndex value to unset instead of -1.
3. Remove className property from BaseShape component.
4. Add css property of type string to all shapes, this property is responsible for adding effects to a component like changing color on hover.

 <Heart
          color="red"
          css={`
            &:hover {
              background: orange;
            }
            transition: 0.5s;
          `}
          position="initial"
          size="200px"
        />

Please keep in mind that to change the color of Donut you have to change the border-color property and for CircleGrid you have to change the fill property and not the background.

For example:

<CircleGrid
          color="green"
          css={`
            &:hover {
              fill: orange;
            }
          `}
          position="initial"
          size="100px"
        />

<Donut
          color="yellow"
          css={`
            &:hover {
              border-color: orange;
            }
          `}
          position="initial"
          size="100px"
          width="20px"
        />

When I tried to use a simple color-changing effect on any shape the background container of the shape also changes color. I am trying to make an effect on hover to change the color!

https://user-images.githubusercontent.com/89961974/159887373-b76381d0-22da-487c-96bd-9a9fed014105.mov

Currently, we have 0% test coverage, we should add some unit tests for components so that we can easily debug if something is breaking in components. cc: @ashutosh1919

Currently react-responsive takes 26% of the total size of the package. If we can remove the package, it will greatly reduce the size of the package. The alternative of react-responsive will be to build custom JS code that will check the screen size where it is executing and will select the value from the breakpoint array.

We can create an directory of animations which will contains CSS animations which can be added to any shape by passing the appropriate props names to the shape component!