Bring the design closer to the DSFR

[SofienM]

Feature Request

Is your feature request related to a problem or unsupported use case? Please describe. Our overall goal is to bring the project's frontend closer to the DSFR (Design Système de l'Etat Français) in order to deploy the project in French official organisations.

Describe the solution you'd like In this issue our goal is not to be completely compatible with the DSFR but only to be closer. Upon discussion this would imply for example:

• change inputs design
• be able to change the main frontpage image (specific issue here https://github.com/openfun/jitsi-magnify/issues/182)

Discovery, Documentation, Adoption, Migration Strategy If you agree with the feature request it could be implemented at least in two ways.

• Manually change the style of some components like in CustomCard.tsx

  const CustomStyledCard = styled('div')`
  padding: 20px;
  background: white;
  border: 10px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0px 2px 4px rgb(0 0 0 / 20%);
  `;

• Import the open source react-dsfr project and change incrementally some components to be based on React-DSFR's ones.

Do you want to work on it through a Pull Request? Sure !

[sampaccoud]

This can now be done by customizing Cunningham's tokens.