ui: update badge awarding page

[zven]

The badge awarding page should also be updated with the new design: https://www.figma.com/file/rq5IOcBWjVAl7tmvtq0GqS/Use-Cases?type=design&node-id=2887-6455&mode=design&t=8QD6fG8uLVLR16Kb-4

There are two new elements on top of the window:

• "Badge-Vorschau": the image of the badge
• "Zertifikats-Vorschau": is something like a small thumbnail preview of the pdf certificate. For now, it's only there to highlight that there is something like a certifcate. Hence, we do not need to create the actual pdf certificate yet. Instead, we simply take the badge image and put in into a frame that looks like our pdf certificates. @Annicelia will provide a suitable graphic.

When a badge was succesfully awarded, we should link to the badge detail view (in case we don't do that yet) and display something like a popup: https://www.figma.com/file/rq5IOcBWjVAl7tmvtq0GqS/Use-Cases?type=design&node-id=2887-6242&mode=design&t=8QD6fG8uLVLR16Kb-4

[Annicelia]

@zven Will this work?

[zven]

@Annicelia Looks suitable to me. 👍 In case we need adjustments, we'll ping you