[PUI] Improve home page style

[30350n]

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:

1. 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.
2. 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)
3. The left/right navigation buttons overlap with the content below 3.1 The buttons also look a little pixelated

4. 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.

Suggested solution

I'd be happy to look into trying to improve the UI design here and I'd probably be capable of doing so if this was vanilla html/css, but from what I can tell this seems to be built on top of "mantine" so I don't really know where I'd even start. If someone could throw me a pointer here on where and how to start, this would be very helpful ^^

Describe alternatives you've considered

Examples of other systems

No response

Do you want to develop this?

• [X] I want to develop this.

[matmair]

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]

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

[wolflu05]

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.

1. just use the style attribute and directly pass in the style via an object
2. 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
3. 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]

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

[SchrodingersGat]

@30350n in terms of getting start with frontend dev, read through these links:

• https://docs.inventree.org/en/stable/develop/devcontainer/
• https://docs.inventree.org/en/stable/develop/react-frontend/

[30350n]

Okay, I see so there's no direct css anywhere but some kind of translation layer. I'll see how far I can get, thanks for the pointers everyone!

[XanderLuciano]

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

For number 1, the padding on the top nav bar is removed by these lines:

https://github.com/inventree/InvenTree/blob/128fa95f7148d636c6fd4c6ed26a42ab8636b81c/src/frontend/src/globalStyle.tsx#L126-L135

[github-actions[bot]]

This issue seems stale. Please react to show this is still important.

[matmair]

We have now migrated to Mantine v7 so you can just use CSS if you want to change those @30350n

[github-actions[bot]]

This issue seems stale. Please react to show this is still important.

[matmair]

@30350n the frontend now supports css for styles - are you still interested in tackling this?