Page MenuHomePhabricator

[Design bugs] Visual updates to the Saved tab
Closed, ResolvedPublic

Assigned To
Authored By
cmadeo
Jan 30 2018, 11:30 PM
Referenced Files
F13774384: savedpagesemptystateillo.pdf
Feb 15 2018, 6:55 PM
F12900776: F 02a.png
Jan 31 2018, 12:00 AM
F12900773: F - Segmented 01.png
Jan 31 2018, 12:00 AM
F12900644: F 02a.png
Jan 30 2018, 11:30 PM
F12900645: F 02b.png
Jan 30 2018, 11:30 PM
F12900697: F 03b.png
Jan 30 2018, 11:30 PM
F12900613: Saved empty state.png
Jan 30 2018, 11:30 PM
F12900612: Reading list empty state.png
Jan 30 2018, 11:30 PM

Description

NOTE: All of the mocks that include the changes listed below have been updated in Zeplin, but screenshots have not been updated in individual tickets

Update to cell styling
HR between cell items should be updated to extend the full length of the cell to match cell styling throughout the app

Standard viewBulk edit viewAdd to list view
F - Segmented 01.png (667×375 px, 138 KB)
F 02a.png (667×375 px, 141 KB)
F 02b.png (667×375 px, 72 KB)
Zeplin: https://zpl.io/2jZr4L4Zeplin: https://zpl.io/VQ0pYAnZeplin: https://zpl.io/2GE6Q6d

Updates to Saved tab header
Currently the selected state on the Saved tab views reads as a progress indicator. The underline under the selected view should float like the underline on search and utilize the same L/R padding as cell items (30px)

Additionally a 'Clear' link should be added to the top left corner of the Saved articles view. Tapping on this link should show the same warning that currently appears when a user taps on the 'clear' button on the current implementation of the Saved tab.

SavedReading lists
F - Segmented 01.png (667×375 px, 138 KB)
F 03b.png (667×375 px, 149 KB)
Zeplin: https://zpl.io/2jZr4L4Zeplin: https://zpl.io/adxL7Ln

Updates to the empty states
The text in all empty states is hard to read and needs to be darker.
The first line of text should be bolded and #222. The second line of text should not be bolded, but should be Base30 (72777D).

Saved view empty stateReading list empty stateAdd to list empty state
Saved empty state.png (667×375 px, 42 KB)
Reading list empty state.png (667×375 px, 46 KB)
Add to reading list empty state.png (667×375 px, 36 KB)
Zeplin: https://zpl.io/a8ElEWxZeplin: https://zpl.io/an6o6rAZeplin: https://zpl.io/a3xkPYY

Event Timeline

cmadeo renamed this task from [Design bug] Visual updates to the Saved tab to [Design bugs] Visual updates to the Saved tab.Jan 31 2018, 12:00 AM
cmadeo updated the task description. (Show Details)

@JoeWalsh I'm still seeing the old illustration for the 'No saved pages' empty state. Just realized that Zeplin has it only as a png though so uploading the pdf here.

JMinor triaged this task as Low priority.