[iOS] Dates Tab Stylistic Changes

[moiz994]

We need to update the UI of the dates screen to meet the stylistic appearance of the new openedX App.

Figma: https://www.figma.com/file/iZ56YMjbRMShCCDxqrqRrR/Open-edX-Mobile-App-All-Screens-v2.0?type=design&node-id=6703-32751&mode=design&t=f5jLhRAWaBSTEIgW-4

High level design changes:

• New sections approach - mentioned below in detail

• Colored sideline for each section

• Smaller date font above line items

• Same-date items are grouped under one date - time zone considerations are to be kept in mind

Instead of adding tags in front of important dates in the dates tab, the course schedule is grouped into different sections based on the criteria mentioned below.

Order on page	Section Name	Logic
1	Completed	All completed items - If an assignment/quiz status is complete, that item will be moved to this section regardless if it is due in the future.This section can be collapsed and expanded.
2	Past Due	Items due before the current date/time.
3	Today	Items due on the current calendar date.Do not show the date above item in this group.
4	This Week	Items due within the next 7 days (7*24 hours from now)
5	Next Week	Items due within the next 14 days (14*24 hours from now)
6	Upcoming	All remaining items

Further required changes:

Further stylistic changes along with some logic updates are needed in the dates tab:

1. Logic for managing assignments on present dates between Past Due and Today section

2. Locked Content and standard course dates design

3. Assignment on present date logic

We need to update the logic for course dates to handle the case of showing past-due course dates on the same day.

The "Today" group will encompass current time until midnight on the user's device in its filter for course dates.

Rational: We saw some edge cases where some events were at different dates but with time less than 24 hours within them so grouping the section in under 24 hours did not make sense. We will be treating the Today section by applying a filter on course dates due from the current time till midnight on the user's device time.

Consider time when filtering course dates between Past Due and Today Section on the present date.

Rational: Since time is also being considered for grouping course dates on this screen, there is a case where a course date can be due on the same day which will result it appearing in the Past Due section and the Today section. A quick solution is to only show it in the Past Due section, however, the date above the hyperlink will be shown as today. To counter this, we will show the dates in the past due section as time instead i.e. 1 hour ago/2 hour ago. Similarly, for the Today section, we will show the time left in submission above the course date i.e. 2 hours left, 1 hour left.

2. Locked Content and Standard Course Date Designs

For locked content, we need to show the lock icon next to the course date item title, and under the title, we will show a copy in a lighter font as shown in the Figma design for Verification Deadline.

For Audit Access Expires and Verification Upgrade Deadline course dates, we will treat the same as above. Lock icon on the side and content in lighter color below. Content will be the same as the current production content for these items.

Audit Access Expires
You lose all access to this course, including your progress.

Verification Upgrade Deadline
You are still eligible to upgrade to a Verified Certificate! Pursue it to highlight the knowledge and skills you gain in this course.

Standard course dates mentioned below have a graduate cap icon next to them as shown in the Figma design.

• Course Starts
• Course Ends

Other info:

• If there is no item in the above-mentioned sections, that section should be hidden in the UI.

• Locked content and other kinds of copy (i.e. not released) to be the same as the prod edX app.