**👨‍🎨 Check out the latest designs for this task on [Zeplin](https://zpl.io/a3mkop8).**
---
| 1. Diff view | 2. Overflow menu | 3. Unwatch | 4. User profile (web view) | 5. User contributions (native, optional) | 6. Thanks: Dialog (shown once) | 7. Thanks: Snackbar | 8. Thanks: Already thanked
| {F33934667} | {F33934664} | {F33930062} | {F33934460} | {F33935377} | {F33935381} | {F33934672} | {F33934676}
1. Shows the main view of the screen.
2. Show the overflow menu of the screen.
3. State when tapping the 'WATCHING' button: Snackbar appears and button changes 'WATCH'.
4. User profile (web view, preferably in-app) — `Talk` link leads users to native talk page
5. Optional: User contributions page (reuses Watchlist main screen design)
6. Thanks flow #1: Dialog appears after tapping the 'Thanks' button to raise awareness (only shown once)
7. Thanks flow #2: Snackbar confirms that the 'Thanks' has been sent. Thanks button is greyed out.
8. Thanks flow #3: Shows the Snackbar when 'Thanks' has already been sent for a specific edit.
**The view consists of:**
- App bar
- Back button
- More menu
- Share edit (icon) → triggers native share dialog with a link to this diff
- %userName’s talk (icon) → takes users to the in-app talk page of this user
- %userName’s contributions (icon) → takes users to the user contributions screen (external link)
- Link to Watchlist item (article, talk, other)
- Button
- Watching
- Full star icon when permanent
- Half star icon when impermanent (→ Watchlist Expiry)
- Date / time
- Previous / next navigation buttons → to navigate back and forth between the Watchlist item’s edit history
- Link to user profile (preferably in-app)
- User icon (person or anonymous)
- User name
- Thank button
- Indication of characters added / removed
- Edit summary
- Edit diff
### Diff style / colors
- Images below derive from iOS, we keep it consistent
- Use `Roboto Bold` to highlight changes in diff
- Use ~~strike through~~ to indicate removed characters
- Background-color: → see table below
| | Light | Sepia | Dark | Black
| **Addition** | {F33934367} | {F33934373} | {F33934377} | {F33934381}
| font-color | `base10` | `green30` | `green50` | `green50`
| background-color | `green90` | `none` | `none` | `none`
| **Removal** | {F33934365} | {F33934370} | {F33934375} | {F33934379}
| font-color | `base10` | `red30` | `red75` | `red75`
| background-color | `red90` | `none` | `none` | `none`
More on colors: [Visual Style: Colors – Wikimedia Design Style Guide](https://phabricator.wikimedia.org/maniphest/task/edit/264017/)