Adapt light mode

[WanQuanXie]

see #125

[ItzCrazyKns]

Thanks for the PR! I'll review it before merging it so we don't face any issues

[WanQuanXie]

Just a simple implement, and maybe the some theme styles are not so pretty, welcome advice❤️

[ItzCrazyKns]

Do you have a discord account so we can communicate better? You can message me at itzcrazykns

[ItzCrazyKns]

The changes look good but the dark theme doesn't seems to be perfectly aligned with the current dark theme. Its a little different, can you take a look at it

[WanQuanXie]

@ItzCrazyKns Yes, and I have already joined our channel. But I'm not skillful to use discord, can you message me at E|vi5 and let me find you.

[WanQuanXie]

The changes look good but the dark theme doesn't seems to be perfectly aligned with the current dark theme. Its a little different, can you take a look at it

More details?

[WanQuanXie]

@ItzCrazyKns I realigned the dark theme, check again?

[ItzCrazyKns]

Just checked it out, there are a lot of issues. The hover for most of the things (like the focus modes, etc.) doesn't work. I think we need to change the colors of the light theme a little bit.

[WanQuanXie]

Thanks advices. I'll test it more detail.

[ItzCrazyKns]

I'm not recommend to use pure arrow function for the React Component. That will lead the component be rendered to an anonymous component and hard to find and debug with the ReactDevTool in Browser. Arrow function component should work pair with displayName attribute which looks like this: Input.displayName = 'Input', or directly use function

Just exported them as default and added name so they should no longer be anonymous and show up on RDT. Arrow functions look clean and are easier to maintain IMO.

[ItzCrazyKns]

Thanks @WanQuanXie!

[WanQuanXie]

Happy to help🚀