Android - Display Sync code expiry when showing the pairing codes

[AlexeyBarabash]

Resolves brave/brave-browser#37725

This PR does two things:

• displays Sync code expiry when showing the pairing codes, as the parent issue describes;
• adjusts colors of Brave Sync screens on Android from obsolete orange to actual bluish.

Parent issue: brave/brave-browser#31904

Submitter Checklist:

• I confirm that no security/privacy review is needed and no other type of reviews are needed, or that I have requested them
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally:
  • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
  • npm run presubmit wiki, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

I. QR code

1. Create a sync chain
2. Press Add New Device button
3. Press Add a Mobile Device
4. Ensure the countdown started from 30 minutes
5. Adjust system time 28-29 minutes forward to speedup test
6. Wait till 0 seconds countdown
7. Ensure QR code became hidden, Code expired warning is shown, Generate New Code button appeared
8. Press Generate New Code button
9. Ensure there is a new QR code, Generate New Code button is hidden and there is a new coundown from 30 minutes.

II. Code words

1. Create a sync chain
2. Press Add New Device button
3. Press Add a Computer
4. Ensure the countdown started from 1 to 2 days, it depends on the local time.
   *. There is no point to wait 2 days to verify, also it is impossible to adjust the time and date after a midday because when the system time is adjusted backwards, java.util.Timer gets stopped.

Videos:

Light theme:

Light_v5.mp4

Dark theme:

Dark_v5.mp4

[github-actions]

[puLL-Merge] - brave/brave-core@23051

Description

This PR makes various UI changes to the Brave Sync settings screens on Android. It updates colors, layouts, and text to match a new design. It also adds a new feature to display countdown timers for sync codes and QR codes, showing how long they remain valid before expiring.

Changes

Changes

android/brave_java_resources.gni

• Adds new drawable resources for Brave Sync button styles, tab layouts, countdown backgrounds, etc.

android/brave_java_sources.gni

• Adds a new Java class BraveSyncCodeCountdownFragment to implement the sync code countdown UI.

android/java/org/chromium/chrome/browser/BraveSyncWorker.java

• Adds new native methods to get the expiration time of a sync code and format the remaining time as a user-friendly string.

android/java/org/chromium/chrome/browser/settings/BraveSyncCodeCountdownFragment.java

• New class that displays the countdown timer UI for sync codes, updating the text each second. Handles showing the code expired message when the countdown reaches zero.

android/java/org/chromium/chrome/browser/settings/BraveSyncScreensPreference.java

• Major changes to the sync settings UI
• Updates colors, layouts, text and styles to match new designs
• Adds a tab layout to switch between QR code and code words options
• Generates new QR codes and code words with expiration times
• Shows the new countdown fragment for QR codes and code words
• Refactors the enabling of different views and layouts

android/java/res/*

• Many changes to layout XMLs, dimensions, colors, strings etc to implement the new UI design

browser/android/brave_sync_worker.cc

• Implements the new native methods to get sync code expiration time and format the time remaining

Security Hotspots

None found. The changes deal with UI and don't appear to introduce any new security risks.

[AlexeyBarabash]

removed roboto_mono_regular.ttf and rebased