feat(dossier): secondary cards

[aaadryyy]

Refactoring of the left panel in the Dossier page.

• new CardLayout component to handle similar aspects between cards (now still in the folders folder as it is unclear if those card will be used elsewhere)
• refactoring of the left panel cards according to the CardLayout
• new icons used in the panel
• theme update to have a secondary button styling

[aaadryyy]

@alexfauquette any idea how to remove uppercase on secondary buttons but keep it on the others (primary, tabs...)?

[alexfauquette]

You can apply this style to the className containedSecondary class: https://mui.com/material-ui/api/button/#Button-css-containedSecondary It exists also for the other variants

Then maybe better to move this textTransform to the style override
https://mui.com/material-ui/customization/theme-components/#theme-style-overrides

[aaadryyy]

So should I also move the fontSize and fontWeight in the style override?
I am not sure how to style the containedSecondary className properly (other than in a .css file).

[alexfauquette]

You have multiple choices

https://mui.com/material-ui/customization/theme-components/#theme-style-overrides

Usually you can write a CSS selector as a key, using & to target the current element.

As an example, you have in the codebase the following code. The same type of property can be use in styleOverride

sx={{
   [`& .${timelineOppositeContentClasses.root}`]: {
        flex: 0.2,
      },
    }}

But I found an easier one for your issue. I just commit

[aaadryyy]

Nice!
I added the fontSize and fontWeight to the fonction in the following commit 👇 .

It felt weird not to use the global theme for buttons, as those will (probably) be reused everywhere.