feat: [FC-0047] Improved Dashboard Level Navigation

[PavloNetrebchuk]

https://www.figma.com/file/iZ56YMjbRMShCCDxqrqRrR/Open-edX-Mobile-App-All-Screens-v2.1?type=design&mode=design&t=W1kb1UTSIkmV2qox-0

The drop-down menu is enabled automatically when "Programs" is enabled in the configuration file.

https://github.com/openedx/openedx-app-android/assets/141041606/6a27c320-16b0-4f98-9089-88de531f18ab

---

https://github.com/openedx/openedx-app-android/assets/141041606/9cbc82b2-0d3d-4268-ad91-41ca17daf2de

---

Light Theme	Dark Theme

Feature enabled by default.

🚨 You should use key:

DASHBOARD:
       TYPE: "list"

to enable a list style Dashboard (old style)

API

Since the new APIs are not available in the master branch, please use the sandbox:

API_HOST_URL: 'https://axim-mobile.raccoongang.net'
OAUTH_CLIENT_ID: 'zP3vPz00c8fTRpYjNbVSlA1fxt9LnCxTM4JK1KQ0'

---

During the development process, we identified the need to refactor the ProgramsFragment. Link to Issue: https://github.com/openedx/openedx-app-android/issues/325

[openedx-webhooks]

Thanks for the pull request, @PavloNetrebchuk! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[sdaitzman]

Hi @PavloNetrebchuk, thanks for these changes. They look really good overall. I've noted all the minor visual issues I could find below. This is a huge usability/experience win regardless of these issues, so if any are difficult to resolve, most of them could be saved for a future cleanup.

iOS:

1. In light and dark mode, the Resume course quick action doesn’t need a border separating it from the other actions. Generally, the quick actions only need a separating border when they’re the same color and would otherwise be difficult to distinguish.
2. In dark mode, I think the View All Courses card may be a bit too dark/difficult to distinguish from the background. It should use the half dark color: Figma Link
3. In the All Courses view in light mode, the filter options currently use a light gray border color, and keep that border color when selected. They should use the accent color as their border, and have no border when selected.
4. Similarly, in dark mode, course filter options should have no border and should just change their background from Half Dark to Accent when selected.
5. When the Programs/Courses dropdown switcher is tapped, the dropdown icon should animate if possible (either fade or morph from one version to the other)

Android:

1. In the primary course card, the title should cut off with an ellipse at three lines
2. Some of the other iOS minor visual issues identified above may also apply, but I couldn’t see them in the video to be sure (e.g. the View All Courses card in dark mode)
3. When the Programs/Courses dropdown switcher is tapped, the dropdown icon should switch to its upside-down version, and animate if possible (either fade or morph from one version to the other)

Both iOS and Android:

1. Copy edits: “2 Past Due Assignment” should be “2 Past Due Assignments.”
2. The account settings gear in the top right should switch to the updated icon (this change is intended to make it clear on all dashboard-level tabs that the account settings icon is not a settings control for the specific feature on that tab, based on input from the Open edX Mobile Design Weekly group): Figma link
3. Selected dashboard-level tabs in dark mode should switch over to using the Dark Theme Accent Text color (#879FF5), not Accent, for adequate text/icon contrast (this could fall under a future cleanup)
4. Currently, the deep-link from some quick actions like upcoming assignments/resume course jump to the course home, pause a brief moment, then navigate into the content. If possible, it would be better to navigate directly to the content loading screen.

[PavloNetrebchuk]

Hello, @sdaitzman I made the changes based on your feedback and changed screenshots and videos in the PR description.

[sdaitzman]

Thanks so much @PavloNetrebchuk, these improvements look great!

[omerhabib26]

Reviewing

[volodymyr-chekyrta]

@omerhabib26 @k1rill friendly reminder on this PR 🙏

[omerhabib26]

Hey @volodymyr-chekyrta, the review is in process and taking some time for no major big change only some code improvements. Hopefully I'll be able to complete its review in a day or two

[PavloNetrebchuk]

During the development process, we identified the need to refactor the ProgramsFragment. Link to Issue: https://github.com/openedx/openedx-app-android/issues/325

[openedx-webhooks]

@PavloNetrebchuk 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.