feat: Dates Screen Stylistic Changes

[shafqat-muneer]

Jira Tickets:

• LEARNER-9735: iOS - Dates Screen Stylistic Changes
• LEARNER-9739: iOS - Icons beside course date links on the dates screen

Github Issues:

• 194

• 196

• 241 (This issue is now obsolete, as we have implemented a new design for the dates module and have successfully addressed the dark mode within it.)

Light Mode

https://github.com/openedx/openedx-app-ios/assets/11990137/1c58e9b3-9a4b-4cf8-af8f-ab0b72ac0696

Dark Mode

https://github.com/openedx/openedx-app-ios/assets/11990137/bb93d60d-48e0-420d-920b-1196f12be277

[rnr]

I think this should say '1 item' instead of 'items'

[rnr]

This text looks too small and it's grey also - hard to read this.

@moiz994 what do you think?

[rnr]

@shafqat-muneer @moiz994 Perhaps we need to follow a uniform arrows animation style for expandable areas (we have one in coursework already)? Thank you

https://github.com/openedx/openedx-app-ios/assets/37253/782c7d6b-22eb-4383-a886-b6acc15c973e

https://github.com/openedx/openedx-app-ios/assets/37253/81f5a802-4e3e-4d16-aba7-f78308349c16

[shafqat-muneer]

This text looks too small and it's grey also - hard to read this. @moiz994 what do you think?

In the Figma designs, the font size is set to 11px, but our application doesn't support this specific size. Our options are either 10 or 12. I opted for Theme.Fonts.labelSmall, which has a size of 10. If we want to increase it to 12, we can choose Theme.Fonts.labelMedium. By selecting Theme.Fonts.labelMedium, it will resemble the screenshot provided.

On the matter of the color grey, I utilized the same color as in Figma for the light mode, as there is no specified dark mode color for the description text. Therefore, the light mode color was exactly same as of ThisWeekTimeline bar color. For the dark mode, I used the ThisWeekTimeline bar dark mode provided color.

[rnr]

This text looks too small and it's grey also - hard to read this. @moiz994 what do you think?

In the Figma designs, the font size is set to 11px, but our application doesn't support this specific size. Our options are either 10 or 12. I opted for Theme.Fonts.labelSmall, which has a size of 10. If we want to increase it to 12, we can choose Theme.Fonts.labelMedium. By selecting Theme.Fonts.labelMedium, it will resemble the screenshot provided.

On the matter of the color grey, I utilized the same color as in Figma for the light mode, as there is no specified dark mode color for the description text. Therefore, the light mode color was exactly same as of ThisWeekTimeline bar color. For the dark mode, I used the ThisWeekTimeline bar dark mode provided color.

@shafqat-muneer I think you can create another font in the theme if needed for design purposes (I believe we shouldn't be limited 10 and 12 only) For example, the font labelMediumSmall its size 11. Thank you

[shafqat-muneer]

@shafqat-muneer @moiz994 Perhaps we need to follow a uniform arrows animation style for expandable areas (we have one in coursework already)? Thank you

Screen.Recording.2024-01-26.at.17.56.49.mov

Screen.Recording.2024-01-26.at.17.57.09.mov

Done. It will now look like this: https://github.com/openedx/openedx-app-ios/assets/11990137/f0112edd-8c81-4e37-bd7b-930983cd88a0

[shafqat-muneer]

This text looks too small and it's grey also - hard to read this. @moiz994 what do you think?

In the Figma designs, the font size is set to 11px, but our application doesn't support this specific size. Our options are either 10 or 12. I opted for Theme.Fonts.labelSmall, which has a size of 10. If we want to increase it to 12, we can choose Theme.Fonts.labelMedium. By selecting Theme.Fonts.labelMedium, it will resemble the screenshot provided. On the matter of the color grey, I utilized the same color as in Figma for the light mode, as there is no specified dark mode color for the description text. Therefore, the light mode color was exactly same as of ThisWeekTimeline bar color. For the dark mode, I used the ThisWeekTimeline bar dark mode provided color.

@shafqat-muneer I think you can create another font in the theme if needed for design purposes (I believe we shouldn't be limited 10 and 12 only) For example, the font labelMediumSmall its size 11. Thank you

@rnr We don't need to introduce a new size. I verified this with Sam here, and he recommended using the labelMedium style (font size 12). Therefore, I adjusted it from 10 to 12.

[shafqat-muneer]

@rnr All feedback has been addressed. Kindly review. Thank you.