Change Details

====Description This task aims to implement an 'End of Highlight' screen that appears after a user has finished reading a highlight. The screen will present the user with a selection of highlights that they can navigate to next. ====Design **Layout:** - The screen consists of a header, a 2x2 card grid section, and a footer. - Header: Include the 'Next up' title. The title should be vertically aligned with the back arrow. Title font size: 18px, Weight: Medium - Spacing between the tail of the back arrow and the beginning of the title: 16px **Card Section:** - Use the card design consistent with the category page. - Display 4 highlight cards in a 2x2 grid layout. **Card content & randomness logic:** - Display 4 highlight cards in a 2x2 grid, similar to the layout on the category page. - If there are remaining highlights from the current topic the user is reading, use the first slots for those. - Fill any remaining slots with highlights from different topics. - Include a text link at the bottom center saying "See All WikiHighlights." - Make the text link clickable, which navigates the user to the category page. - Text properties: Font size 14px, Weight: Medium, Color: #3366cc. **Interactions:** - Tapping on a card takes the user to the respective highlight. - Tapping on the 'See All WikiHighlights' link takes the user to the category page. - Tapping on the back arrow at the top-left corner takes the user to the category page. Note: For the Long-form article microsite, a "Related Articles" section already exists. **Acceptance Criteria** - The 'Next Up' screen should load seamlessly after a user has finished reading a highlight. - All user interactions like tapping on cards or the 'See All WikiHighlights' link should work as intended. - The design should be responsive and should look good on different device sizes.

====Description This task aims to implement an 'End of Highlight' screen that appears after a user has finished reading a highlight. The screen will present the user with a selection of highlights that they can navigate to next. ====Design **Layout:** - The screen consists of a header, a 2x2 card grid section, and a footer. - Header: Include the 'Discover more' title. The title should be vertically aligned with the back arrow. Title font size: 18px, weight: Medium, color: #202122 - Place the title "Discover more" at the top center of the screen. **Card Section:** - Use the card design consistent with the category page. - Display 4 highlight cards in a 2x2 grid layout. **Card content & randomness logic:** - Display 4 highlight cards in a 2x2 grid, similar to the layout on the category page. - If there are remaining highlights from the current topic the user is reading, use the first slots for those. - Fill any remaining slots with highlights from different topics. - Include a text link at the bottom center saying "See all WikiHighlights." - Make the text link clickable, which navigates the user to the category page. - Text properties: Font size 14px, Weight: Medium, Color: #3366cc. **Interactions:** - Tapping on a card takes the user to the respective highlight. - Tapping on the 'See all WikiHighlights' link takes the user to the category page. - Tapping on the back arrow at the top-left corner takes the user to the category page. Note: For the Long-form article microsite, a "Related Articles" section already exists. **Acceptance Criteria** - The 'Discover more' screen should load seamlessly after a user has finished reading a highlight. - All user interactions like tapping on cards or the 'See all WikiHighlights' link should work as intended. - The design should be responsive and should look good on different device sizes.

====Description This task aims to implement an 'End of Highlight' screen that appears after a user has finished reading a highlight. The screen will present the user with a selection of highlights that they can navigate to next. ====Design **Layout:** - The screen consists of a header, a 2x2 card grid section, and a footer. - Header: Include the 'Next up'Discover more' title. The title should be vertically aligned with the back arrow. Title font size: 18px, weight: Medium, Weight: Mediumcolor: #202122 - Spacing between the tail of the back arrow and- Place the title "Discover more" at the beginningtop center of the title: 16pxscreen. **Card Section:** - Use the card design consistent with the category page. - Display 4 highlight cards in a 2x2 grid layout. **Card content & randomness logic:** - Display 4 highlight cards in a 2x2 grid, similar to the layout on the category page. - If there are remaining highlights from the current topic the user is reading, use the first slots for those. - Fill any remaining slots with highlights from different topics. - Include a text link at the bottom center saying "See Aall WikiHighlights." - Make the text link clickable, which navigates the user to the category page. - Text properties: Font size 14px, Weight: Medium, Color: #3366cc. **Interactions:** - Tapping on a card takes the user to the respective highlight. - Tapping on the 'See Allall WikiHighlights' link takes the user to the category page. - Tapping on the back arrow at the top-left corner takes the user to the category page. Note: For the Long-form article microsite, a "Related Articles" section already exists. **Acceptance Criteria** - The 'Next Up'Discover more' screen should load seamlessly after a user has finished reading a highlight. - All user interactions like tapping on cards or the 'See Allall WikiHighlights' link should work as intended. - The design should be responsive and should look good on different device sizes.