[PUI] Improve home page style

30350n commented 4 months ago

Please verify that this feature request has NOT been suggested before.

[X] I checked and didn't find a similar feature request

Problem statement

With PUI now being promoted in the 0.14.0 release blog post, I think it might be a good idea to clean up the home page UI a bit, as this is the first thing everyone sees. (Not content, but style wise, as currently parts of it seems quite cluttered).

Issues from the screenshots:

The left- and rightmost tabs (Home and Sales) have their right/left margins respectively, set to 0, which causes the underline not to be centered anymore.
The styling of the light gray boxes clashes with the inner darker ones. 2.1 Corners should be rounded 2.2 Vertical/Horizontal margins should be equal (or atleast not this dissimilar)
The left/right navigation buttons overlap with the content below 3.1 The buttons also look a little pixelated

The settings menu pops up on top of the main nav bar, I think it'd look better if it's top right corner would be at the bottom right corner of the nav bar.

Describe alternatives you've considered

-

Examples of other systems

No response

Do you want to develop this?

[X] I want to develop this.

matmair commented 4 months ago

2 was a stylistic choice 2.1 this was chosen to contrast the interactive carousel with the static background of the widget 2.2 widgets follow a fixed grid width/height while content does not so the content would need to be adjusted. Keep in mind that the content is a touch-enabled carousel

You can submit a PR for sure; I have not bothered to finish the design as core functions are still missing

30350n commented 4 months ago

Any pointers regarding where to start? Where does the styling happen in the first place?

wolflu05 commented 4 months ago

Your point one already bothered me too and I actually thought I would have committed that already in one of my PRs, but turns out I forgot. You just need to remove those lines:

https://github.com/inventree/InvenTree/blob/master/src/frontend/src/globalStyle.tsx#L128-L134

And related to where you find what. Actually the styling comes at first place from the prebuilt mantine components. And to customize them you have a few options.

just use the style attribute and directly pass in the style via an object
use the className attribute in combination with the createStyles hook. That's how the global style is done. But actually I personally think it's better to put that directly where the component lives instead of one big file, and naming it according to the convention of hooks: useStyles
if you want to style child components used in mantine to build one component, there is the classNames and styles attribute available. There you can pass an object with key being the sub component name and value either an object (style) or string for className, like in 1/2

You can read more here (https://v6.mantine.dev/styles/create-styles/)

matmair commented 4 months ago

I strongly disagree with 2, this makes changing styles centrally much harder