Skip to content

Change navigation bar and top tabs background color in Reader and Notifications#20278

Merged
salimbraksa merged 9 commits into
task/reader-change-cog-iconfrom
task/change-filter-tab-bg-color-part-1
Mar 10, 2023
Merged

Change navigation bar and top tabs background color in Reader and Notifications#20278
salimbraksa merged 9 commits into
task/reader-change-cog-iconfrom
task/change-filter-tab-bg-color-part-1

Conversation

@salimbraksa

@salimbraksa salimbraksa commented Mar 7, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor

Requirement

The background colour on dark mode for the navigation bar is different on Reader and Notifications. Notifications is the same as Home. So I think it is reader that is incorrect. See image below. Also the color is different between the navigation bar and the top tabs, but that's less of an issue to me. - @osullivanchris

Source:

Description

This PR adds the following changes:

  • The Reader's navigation bar background color changed to match Notifications and Home navigation bar color.
  • [Jetpack-only] The top tabs background color changed to match the navigation bar color.
Screen Before After
Reader before-reader  after-reader
Reader > Following before-reader-following after-reader-following
Reader > Search before-reader-search after-reader-search
Notifications before-notifications after-notifications
My Site > Stats before-stats after-my-site-stats

Test Instructions

  1. Install Jetpack and log into your account.
  2. Enable Dark Mode.
  3. Repeat the following step for these screens:
    1. Reader tab
    2. Reader > Followed Topics / Sites ( the icon next to 🔍 button )
    3. Reader > Search 🔍
    4. Notifications tab
    5. My Site > Stats
  4. Verify the top tabs background color matches the navigation bar background color
  5. When on Reader screen, Verify the navigation bar background matches the one in Notifications screen.

Regression Notes

  1. Potential unintended areas of impact
    None.

  2. What I did to test those areas of impact (or what existing automated tests I relied on)
    None.

  3. What automated tests I added (or what prevented me from doing so)
    None.

PR submission checklist:

  • I have completed the Regression Notes.
  • I have considered adding unit tests for my changes.
  • I have considered adding accessibility improvements for my changes.
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

@salimbraksa salimbraksa self-assigned this Mar 7, 2023
@salimbraksa salimbraksa added this to the 22.0 milestone Mar 7, 2023
@salimbraksa salimbraksa changed the base branch from trunk to task/reader-change-cog-icon March 7, 2023 21:48
@wpmobilebot

wpmobilebot commented Mar 7, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor
You can test the changes in WordPress from this Pull Request by:
  • Clicking here or scanning the QR code below to access App Center
  • Then installing the build number pr20278-804ff6a on your iPhone

If you need access to App Center, please ask a maintainer to add you.

@wpmobilebot

wpmobilebot commented Mar 7, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor
You can test the changes in Jetpack from this Pull Request by:
  • Clicking here or scanning the QR code below to access App Center
  • Then installing the build number pr20278-804ff6a on your iPhone

If you need access to App Center, please ask a maintainer to add you.

@salimbraksa salimbraksa marked this pull request as ready for review March 8, 2023 08:19
@salimbraksa salimbraksa marked this pull request as draft March 8, 2023 08:27
@salimbraksa salimbraksa marked this pull request as ready for review March 8, 2023 08:35
@salimbraksa salimbraksa changed the title Change filters tab view background color ( Part 1 ) Change navigation bar and top tabs background color in Reader and Notifications Mar 8, 2023
osullivanchris
osullivanchris approved these changes Mar 8, 2023
View reviewed changes

@osullivanchris osullivanchris left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks much better 👍 👏

@salimbraksa salimbraksa force-pushed the task/change-filter-tab-bg-color-part-1 branch from 11912ad to 804ff6a Compare March 8, 2023 11:20
@salimbraksa salimbraksa force-pushed the task/reader-change-cog-icon branch 3 times, most recently from 8cd0ab2 to cf9305f Compare March 9, 2023 11:35
guarani
guarani approved these changes Mar 9, 2023
View reviewed changes

@guarani guarani left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look great, @salimbraksa! ❤️ I tested light & dark modes on iPhone and iPad.

@salimbraksa
Merge branch 'task/reader-change-cog-icon' of github.com:wordpress-mo…
fcf4c63 
…bile/WordPress-iOS into task/change-filter-tab-bg-color-part-1
@salimbraksa salimbraksa merged commit 417903b into task/reader-change-cog-icon Mar 10, 2023
@salimbraksa salimbraksa deleted the task/change-filter-tab-bg-color-part-1 branch March 10, 2023 10:04
salimbraksa added a commit that referenced this pull request Mar 10, 2023
@salimbraksa
Change navigation bar and top tabs background color in Reader and Not…
b9e857e 
…ifications (#20278)

* Remove large titles from the Reader and Notification tab

* Update RELEASE-NOTES

* Change the cog icon in Reader

* Update RELEASE-NOTES

* Change the dark background color of toolbars and top tabs across the whole app

* Change the Reader's navigation bar background color to match other screens

* Update RELEASE-NOTES
@wpmobilebot

wpmobilebot commented Mar 10, 2023

Copy link
Copy Markdown
Contributor
Jetpack Alpha📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.
App NameJetpack Alpha Jetpack Alpha
ConfigurationRelease-Alpha
Build Numberpr20278-fcf4c63
Version21.9
Bundle IDcom.jetpack.alpha
Commitfcf4c63
App Center Buildjetpack-installable-builds #4191
 Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

This was referenced Mar 18, 2023
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alpavanoglu alpavanoglu Awaiting requested review from alpavanoglu
2 more reviewers
@guarani guarani guarani approved these changes
@osullivanchris osullivanchris osullivanchris approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@salimbraksa salimbraksa

Labels

Notifications Reader

Projects

None yet

Milestone

22.0

Development

Successfully merging this pull request may close these issues.

4 participants

@salimbraksa @wpmobilebot @guarani @osullivanchris