Fixes circular component sizing functionality for all devices. Fix #9

[Amorpheuz]

Fixes sizing issues of #9

The circular component should scale properly on all devices now, Set it's width to be 40% of the screen.

In order to modify how the circle looks and it's positioning, modify SemiCircleContainer, while color of the semicircle can be modified via SemiCircle Component.

Preview:

• Right Side
  

• Left Side
  

[harshil1712]

This still doesn't fix the issue. I was setting the height more than 100% so that we could set its position (top) such that the we get the expected result. We don't want the whole semi circle. Compare your result with the design, focus more on the top and bottom, you will understand what I mean to say.

[Amorpheuz]

Yup, I noticed it later in the night, I have got another idea which I will hopefully get done with today... That one should work flawlessly

[harshil1712]

Did you solve the issue for left side?

[Amorpheuz]

Done with full circular component setup for desktop that is. Setup 3 different variations of the component, a left, right and one specific to home with more negative space.

Is this the confirmed mobile design?

If so, I can setup another top variation for the same. Do you recommend having media queries as outlined here for switching between top and desktop?

[harshil1712]

Since you have created the component using styled-compnents I prefer not to include material design here

…

On Fri, 28 Jun, 2019, 12:19 PM Yash Dave, ***@***.***> wrote: Done with full circular component setup for desktop that is. Setup 3 different variations of the component, a left, right and one specific to home with more negative space. Is this the confirmed mobile design? [image: image] <https://user-images.githubusercontent.com/22113778/60322924-5915e380-999e-11e9-9054-d9ab00cedd52.png> If so, I can setup another top variation for the same. Do you recommend having media queries as outlined here <https://material-ui.com/components/use-media-query/#ThemeHelper.js> for switching between top and desktop? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#13?email_source=notifications&email_token=AEQGQKCKEIK7R266OGQDC5LP4WX7HA5CNFSM4H3SY4AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYZHN3Y#issuecomment-506623727>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEQGQKDSABKRTMDAVEADLHTP4WX7HANCNFSM4H3SY4AA> .