General: Add buttons to the avatar in the course edit view and move image cropper into a modal

[eceeeren]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• 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 strictly followed the client 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

Closes #7524

Description

Steps for Testing

Prerequisites:

• 1 Instructor

To test it while creating a new course:

1. Log in to Artemis
2. Navigate to Course Management
3. Click "Create new course"
4. Click on "Click to add" placeholder and verify that it opens a file uploader
5. Verify that you can see "Crop your image" modal
6. Crop your image and click save, verify that you can see that the image is cropped and set as course icon
7. Test the delete button on the icon by clicking "Trash icon", the icon should be removed
8. Test the edit button on the icon by clicking "Pen icon", the file uploader should be opened again
9. Click "Save" to save the new icon
10. Observe that you can see the new icon on the course detail page

To test it while editing a course:

1. Log in to Artemis
2. Navigate to Course Management
3. Select the course you have created
4. Click on "Pen icon" to change your image
5. Click on "Trash icon" to change your image
6. Verify that you can see "Crop your image" modal
7. Remove the image and click "Save"
8. Observe that you can see the new icon/no icon on the course detail page

Testing the Dark Mode:

1. Repeat the steps above with Dark Mode enabled
2. Observe that there are no inconsistencies with the colouring

Testing German Version:

1. Repeat the steps above with German Version enabled
2. Verify that Image Placeholder text changes to "Zum Hinzufügen klicken"

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked

Review Progress

Performance Review

• I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance
• I (as a reviewer) confirm that the server changes (in particular related to database calls) are implemented with a very good performance

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Screenshots

Image Placeholder in English

Image Placeholder in German

Image Cropper Modal in Light Mode

Image Cropper Modal in Dark Mode

Image Removing and Editing Buttons

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Introduced an image cropping feature for course images, enhancing user interaction by allowing image adjustments directly within the course management interface.
  • Added new interface elements and hints in both German and English to guide users in image cropping.

• Style

  • Improved visual styling and alignment for course management buttons and icons.
  • Enhanced UI elements with new colors, positioning, and shadows to improve user experience.

• Documentation

  • Updated language files to include new terms and hints related to the image cropping feature.

[beyzaaltuntas]

Tested manually on ts-3, working as expected.

[rstief]

Looks good overall, some small comments on styling and tests

[JohannesWt]

Just translations

[JohannesWt]

Showed in testing session -> everything works. My former comments have also been resolved.

[rstief]

Code looks good 👍 Thanks for changing the styling to classes!

[bassner]

LGTM 🚀