General: Enhance exercise buttons with exercise type icons

[milljoniaer]

Checklist

General

• This is a small issue that I tested locally and was confirmed by another developer on a test server.
• Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
• I chose a title conforming to the naming conventions for pull requests.

Client

• Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data.
• I followed the coding and design guidelines.
• Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
• I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
• I added authorities to all new routes and checked the course groups for displaying navigation elements (links, buttons).
• I documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes.
• I translated all newly inserted strings into English and German.

Motivation and Context

Stephan suggested adding exercise-type icons for the Create/Import Exercise buttons in the exercise group management view to improve UX.

Description

These icons are already displayed on mobile, when the button label is not displayed anymore. This PR displays them also on desktop after the label.

Edit: Same goes for the course exercise create/import buttons and the order of create and import buttons is unified to first the "Create" Button and then the "Import" Button.

Steps for Testing

Prerequisites:

• 1 Instructor
• 1 Exam with 1 Exercise Group
• View the control section there on mobile and desktop
• Verify that the exercise-type icons are displayed on both

Review Progress

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Screenshots

Desktop:

Mobile:

course exercises:

[lennart-keller]

Code changes lgtm. Have you considered putting the icons in the front instead? Personally, I am a bit unsure what looks better:

[DominikRemo]

Code LGTM
Tested on ts2 and works as expected

[JohannesStoehr]

Looks good over all and I personally like the icons behind the text better as you already did.
Can you also add these icons to the course exercise page? Additionally I noticed that the import and create option in the exam page is the other way round compared to the course page. You could unify that order as well (I'd suggest creation above/before import)

[milljoniaer]

Thank you for your feedback, I sticked to the exercise icon at the end, added the icon also in the course exercise views and unified the order of create/import buttons. Please have another look at the PR.

[JohannesStoehr]

Thanks for unifying the two occurrences.
Code looks good to me

[terlan98]

Tested on TS5. The icons are visible for exam exercise groups and course exercises 👍

[JohannesStoehr]

Reapprove after unification

[DominikRemo]

Tested on ts1. Works as expected

[terlan98]

Re-tested on TS5 and reapproved

[laadvo]

tested on ts1, icons are displayed as expected

[lennart-keller]

Recent code changes lgtm