Fix part #23: Hi fi topic multiple tabs

[nikitamarysolomanpvt]

The topic page should provide background information on the topic, skills corresponding to the topic (which link to the concept card for that skill), navigation to training on skills in the topic, the progress of stories the user has played in that topic, and links to stories (with preference for in-progress/immediately upcoming stories, though all stories should be viewable). See the PRD for specifics.

Note that this is tracking implementing the final UI for just the topic page. The final UIs for each constituent tab is indicated as a blocker of this issue.

https://xd.adobe.com/spec/e2239cf4-9cde-4c08-5296-25316c1f0a14-9412/screen/19cfbacf-854c-4c7d-8691-3b3d117e1866/TP-Overview-

Task Items

• Toolbar/ActionBar title

• TabLayout with icons and titles

• Final check on all fragments and final touch-up

• Accessibility Scanner is working correctly (https://support.google.com/accessibility/android/answer/6376570?hl=en)

Checklist

• The PR title starts with "Fix #bugnum: ", followed by a short, clear summary of the changes. (If this PR fixes part of an issue, prefix the title with "Fix part of #bugnum: ...".)
• The PR explanation includes the words "Fixes #bugnum: ..." (or "Fixes part of #bugnum" if the PR only partially fixes an issue).
• The PR follows the style guide.
• The PR does not contain any unnecessary auto-generated code from Android Studio.
• The PR is made from a branch that's not called "develop".
• The PR is made from a branch that is up-to-date with "develop".
• The PR's branch is based on "develop" and not on any other branch.
• The PR is assigned to an appropriate reviewer in both the Assignees and the Reviewers sections.

[rt4914]

Once changes are done, run accessibility scanner to check everything.

Also, one more point: The title of the toolbar is Topic: <TOPIC_NAME>

[nikitamarysolomanpvt]

@mschanteltc Please find the below issues.

1. Text contrast
   [358,336][451,389]
   The item's text contrast ratio is 4.34. This ratio is based on an estimated foreground color of #B3D1CE and an estimated background color of #00645C. Consider using a contrast ratio greater than 4.50 for small text, or 3.00 for large text.

2. Text contrast
   [618,336][731,389]
   The item's text contrast ratio is 4.34. This ratio is based on an estimated foreground color of #B3D1CE and an estimated background color of #00645C. Consider using a contrast ratio greater than 4.50 for small text, or 3.00 for large text.

3. I feel the icons given for tabs are not actually matching the mock. Please provide svg icons 24/ 24 height/width and 24 * 24 viewport

[rt4914]

@nikitamarysolomanpvt why have I been assigned again? I am not able to see any changes in this.

[nikitamarysolomanpvt]

@nikitamarysolomanpvt why have I been assigned again? I am not able to see any changes in this.

Sorry i merged the code with an old branch which .PTAL now

[rt4914]

Once changes are done, run accessibility scanner to check everything.

Also, one more point: The title of the toolbar is Topic: <TOPIC_NAME>

@nikitamarysolomanpvt please make this change.

[rt4914]

There is one change remaining, check all the comments.

[veena14cs]

Looks good please address one comment.

[mschanteltc]

@mschanteltc Please find the below issues.

1. Text contrast
   [358,336][451,389]
   The item's text contrast ratio is 4.34. This ratio is based on an estimated foreground color of #B3D1CE and an estimated background color of #00645C. Consider using a contrast ratio greater than 4.50 for small text, or 3.00 for large text.
2. Text contrast
   [618,336][731,389]
   The item's text contrast ratio is 4.34. This ratio is based on an estimated foreground color of #B3D1CE and an estimated background color of #00645C. Consider using a contrast ratio greater than 4.50 for small text, or 3.00 for large text.
3. I feel the icons given for tabs are not actually matching the mock. Please provide svg icons 24/ 24 height/width and 24 * 24 viewport

For the header text, the font is pure white #FFFFFF while the background is #00645C. This would provide a contrast ratio of 7.05.

For the unselected tab objects, they are all #FFFFFF but have different opacities. The selected that will be 100% opacity. The unselected tabs will increase opacity from 70% to 80%. Using an eyedropper tool, this will make the icons appear as #CCE0DE (do not use this hex for sake of consistency). The contrast this will have against the background would be 5.13.

I will post the icons in the shared Google Drive folder and will let you know when they are available.

[mschanteltc]

I shared the icons in the Google Drive folder called "Topic Page."

[nikitamarysolomanpvt]

I shared the icons in the Google Drive folder called "Topic Page."

Done. But still i feel two of them looks big other two looks smaller comparatively.

[mschanteltc]

Is it possible you can share a screenshot so I can understand which two needs fixing please?