Several UI and Developer Experience improvements

[firattale]

What would you like to be added?

1-) Add a Custom 404 Page #1013
2-) Scrolling in the Homepage creates a white blank at top and at bottom. We need to prevent that or change the color to have better color consistency. https://my.metagame.wtf/players #1104
3-) It is good to have path aliases in the import of other components. That would save time to to copy other component's imports or changing any file location. #1082

Why is this needed?

1-) We have a regular Next Js 404 Page, It would be good to use a custom 404 Page, But design needed.

2-)

3-)

[vidvidvid]

Nice suggestions. May I ask what is the url of the 'Homepage' you're referring to, which browser are you using and if you could record this behaviour?

[firattale]

hi @vidvidvid , it is happening here https://my.metagame.wtf/players

[vidvidvid]

ohh, but this is just standard website design, i believe. it's happening on pretty much every website on mac/chrome. we could look into how to change that, but i don't think it needs fixing. just check github, for example, same thing happens here:

[firattale]

Yes @vidvidvid , that's true, but it is white because in light mode, when you switch to dark mode, that area becomes dark and consistent with theme UI. So we can change it to Metagame purple color.

[vidvidvid]

ahhh, true!

[vidvidvid]

the file for setting the theme can be found in packages/design-system/src/theme/index.ts

[lucidcyborg]

Could you also look into the flickering effect the animations have in the profiles in this PR?

Schermopname.2021-12-14.om.17.34.53.mov

[firattale]

@mquellhorst this might happen because of my recent PR, but haven't seen anything like that in my profile, I will check that.

[firattale]

@mquellhorst I check both on my local and live and it seems fine, where did this happen like browser etc? is it possible to reproduce it?

Screen.Recording.2021-12-15.at.11.31.04.mov

[vidvidvid]

I'll fix 2) in #1104