fix onHover issue

[essofyany]

#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"
        />

[netlify]

✅ Deploy Preview for awesomeshapes ready!

Name	Link
🔨 Latest commit	edb4cfa
🔍 Latest deploy log	https://app.netlify.com/sites/awesomeshapes/deploys/6278244d27811000089b42d4
😎 Deploy Preview	https://deploy-preview-91--awesomeshapes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Sachin-chaurasiya]

@ashutosh1919 , Please review once.

[ashutosh1919]

@essofyany why background shapes are scattered all over the place? why did you set zIndex=unset?

@Sachin-chaurasiya , @mohittk please don't merge until the shape positions are undone and the website looks same as the original one.

[essofyany]

Hi there. in order to fix onHover issue which is caused by shape position (absolute/relative) also to its parent dimension, so to fix it I had to tweak other properties like z-index and suddenly this affects the positions of the shapes on the homepage.
so please don't merge until repositioning the shapes on the homepage.