Rewrite Category lists to use Mui and new design

[LeandraH]

Describe the Problem

Let's rewrite the lists in our 2nd- and 3rd-level categories! We should use the Mui List components, and follow the new design.
New design: https://www.figma.com/design/o5p3ArtrrmOqG6lJggAQE5/%F0%9F%9F%A8-Designsystem-Integreat--MUI-?node-id=14-751&p=f&m=dev
New design of the whole page: https://www.figma.com/design/o5p3ArtrrmOqG6lJggAQE5/%F0%9F%9F%A8-Designsystem-Integreat--MUI-?node-id=3074-9734&m=dev
Mui List: https://mui.com/material-ui/react-list/

You may also use a list Divider check this discussion: #3417 (review)

Describe Your Preferred Solution

Rewrite our lists in the categories to use Mui lists and to follow the new design. Please make sure that it fits both for the mobile web and the desktop web version.

Related Issues

Part of #3231

Additional Information

[hauf-toni]

@bahaaTuffaha had some questions about this issue:

1. Do I show Icons for mobile (because there is a design for mobile without icons)?
2. The font Inter looks like it don't have a weight 500 for Arabic for example ... do I increase the font size a bit just for the root category?
3. some sub-categories have icons do I keep showing these icons if available?_

Here are my thoughts on this:

1. Yes, we want to show the existing icons. The list without the icons in the design file is for a possible use case where we don't have icons available.

2. I would recommend to either
   A. try setting font-weight to 500 anyway as some browsers often simulate the weight
   B. use a fall back a font that has proper weight coverage for Arabic (like Noto Sans Arabic)
   What do you think? If we only invcrease the weight the change might not be visible enough.
3. Yes, please show these Icons too if available.

Thank you for your questions on this.