Programming exercises: Improve task bar design

[PaRangger]

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 (e.g. using paging).
• 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 screenshots/screencasts of my UI changes.

Motivation and Context

Currently, the task bar in a programming exercise looks a bit out of place. It looks like this:

There was a design mockup on figma for a new task bar here: https://www.figma.com/design/BGx58G5OhhCUOToD6cPKQA/Artemis-Navigation-Flow?node-id=4165-64510&m=dev&t=7vXtR0SZJZA94hEN-1

Description

I changed the html and css so that the design looks more like the design in figma.

Steps for Testing

Prerequisites:

• To test this, you need to deploy on a testserver that has the coding lifecycle enabled. For example Testserver 3.
• On TS3 in my course "Test Course Paul Rangger" with Test User 1 I have a programming exercise that was commited to. With this you can skip the steps 6 to 11.
• 1 Student
• 1 Course with a fresh programming exercise

1. Log in to Artemis
2. Go to course
3. Go to the exercises tab
4. Go to the programming exercise
5. Check the default task bar styling
6. Press the start exercise button on the top right
7. Get the repository link
8. Checkout the repository
9. Implement something so that atleast one check will fail and one check will pass (example bubble sort implementation at the bottom, if you kept the default repo)
10. Commit and push your changes
11. Wait for the tests to run
12. Check the styling of the failing and running tests

You may take this to have a successful test in bubble sort:

int n = input.size();
for (int i = 0; i < n - 1; i++) {
    for (int j = 0; j < n - i - 1; j++) {
        if (input.get(j).compareTo(input.get(j + 1)) > 0) {
            Date temp = input.get(j);
            input.set(j, input.get(j + 1));
            input.set(j + 1, temp);
        }
    }
}

Testserver States

Note

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

Review Progress

Performance Review

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Screenshots

Summary by CodeRabbit

• UI/UX Improvements

  • Updated icons for unexecuted and no-result states in step wizard and task status components.
  • Enhanced styling for step wizard layout with new classes and positioning.
  • Refined button and step styling with improved font sizes and spacing.

• Style Updates

  • Added new SCSS variables for consistent font and button sizing.
  • Modified padding and justification for various UI elements.
  • Introduced new style variants for step states (failed, success, no result).

[DominikRemo]

Tested on ts4. Changes look good to me in normal programming exercises and in exam mode programming exercises :)

Btw.: You can easily pass the bubble sort test in the example exercises using
Collections.sort(input); ;)

[Feras797]

tested on ts3, the progress bar has the correct view before and after pushing 👍

[Cathy0123456789]

Tested on TS3. Everything looks as described.
Honestly I liked the old design though, the grey background made the progress bar stand out more and the dots were a bit bigger, but I guess that's just taste, maybe I just got used to it

[coolchock]

code

[sawys777]

Tested on TS3, everything works as expected, the new design looks clean.

[krusche]

The new design looks awesome 👍 Thank you @PaRangger for the implementation and thanks to @rabeatwork for the Figma mockups