feat(REB-289): Add Rylo redirect overlay on translate app

[HTMHell]

Summary

Adds a non-dismissible popup on the translate app (REB-289) that redirects users to Sign Translate by Rylo (rylo.com/sign/translate) via a CTA. The popup is a centered modal card over a dimmed backdrop, styled in the Rylo palette. Web only — not shown in the native apps. Also updates the header logo and announcement banner to Rylo.

Test plan

• Lint, unit tests, and production build pass
• Verified on desktop and mobile widths
• Confirm on staging that the CTA navigates correctly and the click event lands in analytics

Summary by CodeRabbit

• New Features

  • Added a redirect overlay dialog that displays on web platforms, guiding users to visit Rylo.

• Style

  • Updated all branding references to Rylo, including logo and messaging throughout the app.
  • Enhanced typography with additional font weights for improved visual hierarchy.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Adds a new redirect overlay component visible only on non-native platforms, with analytics event logging, conditional ARIA dialog rendering, full-screen styled overlay, and app-level integration. Also updates branding references from Nagish to Rylo in logo and announcement banner components.

Changes

Rylo Redirect Overlay and Branding

Layer / File(s)	Summary
Analytics event logging src/app/core/modules/google-analytics/google-analytics.service.ts	GoogleAnalyticsService exposes a new async logEvent(name, params?) method that forwards events to Firebase Analytics when supported.
Overlay component logic, template, styles, and tests src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.ts, rylo-redirect-overlay.component.html, rylo-redirect-overlay.component.scss, rylo-redirect-overlay.component.spec.ts	RyloRedirectOverlayComponent is a standalone component visible only on non-native platforms. It renders a fixed full-screen ARIA dialog with title, subtitle, and a CTA link to redirectUrl. On CTA click, it prevents default, logs a rylo_redirect_click analytics event (suppressing errors), and then sets window.location.href to perform the redirect. Styles include a Rylo-themed card with gradient background, layered cloud imagery, orange CTA button with hover lift and active press states, and responsive typography. Tests verify the CTA is rendered on web platforms and the overlay is hidden on native platforms.
App integration and typography src/app/app.component.ts, src/app/app.component.html, src/theme/fonts/poppins.css	AppComponent imports and registers RyloRedirectOverlayComponent in its standalone imports array and renders it in the root template. Adds a Poppins 600 font weight @font-face definition for overlay typography.
Branding updates from Nagish to Rylo src/app/components/logo/logo.component.html, src/app/components/logo/logo.component.scss, src/app/components/announcement-banner/announcement-banner.component.html	Logo component template and SCSS now reference rylo.com and rylo.svg instead of Nagish assets; the SCSS selector is renamed from .nagish-logo to .rylo-logo. Announcement banner text and link are updated to reference Rylo acquisition instead of Nagish.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

A rabbit hops with pride so bright,
To see the overlay shine so white,
With Rylo's clouds and orange cheer,
And analytics logged crystal clear,
From Nagish past to futures new—
🐰 Welcome aboard, Rylo through and through!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: adding a Rylo redirect overlay to the translate app. It accurately reflects the primary feature being introduced.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch reb-289-rylo-redirect-overlay

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.scss (2)

39-56: ⚡ Quick win

Remove unnecessary quotes from font-family declarations.

Stylelint flags the quotes around 'Poppins' on lines 41 and 51 as unnecessary. The CSS specification allows unquoted font-family names when they don't contain spaces or special characters. Removing the quotes addresses the linter warnings.

♻️ Proposed fix

   font-family: 'Poppins', sans-serif;
-  font-family: 'Poppins', sans-serif;
+  font-family: Poppins, sans-serif;
   font-weight: 600;

   margin: 0;
-  font-family: 'Poppins', sans-serif;
+  font-family: Poppins, sans-serif;
   font-weight: 400;

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.scss`
around lines 39 - 56, Remove the unnecessary single quotes around the
font-family in both .rylo-overlay__title and .rylo-overlay__subtitle; update the
declarations from font-family: 'Poppins', sans-serif to font-family: Poppins,
sans-serif in the CSS so Stylelint warnings are resolved while keeping the same
fallback.

Source: Linters/SAST tools

---

58-86: ⚡ Quick win

Remove unnecessary quotes from CTA font-family.

Line 67 has the same unnecessary quotes around 'Poppins' flagged by stylelint on the title and subtitle. Applying the same fix here maintains consistency.

♻️ Proposed fix

   color: `#191412`;
-  font-family: 'Poppins', sans-serif;
+  font-family: Poppins, sans-serif;
   font-weight: 600;

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.scss`
around lines 58 - 86, The font-family declaration in .rylo-overlay__cta uses
unnecessary single quotes around 'Poppins' causing stylelint to flag it; update
the font-family in the .rylo-overlay__cta rule to remove the quotes and match
the other components (use Poppins, sans-serif) so linting and consistency are
preserved.

Source: Linters/SAST tools

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.scss`:
- Around line 39-56: Remove the unnecessary single quotes around the font-family
in both .rylo-overlay__title and .rylo-overlay__subtitle; update the
declarations from font-family: 'Poppins', sans-serif to font-family: Poppins,
sans-serif in the CSS so Stylelint warnings are resolved while keeping the same
fallback.
- Around line 58-86: The font-family declaration in .rylo-overlay__cta uses
unnecessary single quotes around 'Poppins' causing stylelint to flag it; update
the font-family in the .rylo-overlay__cta rule to remove the quotes and match
the other components (use Poppins, sans-serif) so linting and consistency are
preserved.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5ca09ac1-653b-4ff3-9dd5-12a5589212e8

📥 Commits

Reviewing files that changed from the base of the PR and between d09761f and db731ad.

📒 Files selected for processing (3)

• src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.html
• src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.scss
• src/assets/rylo-hero-background.webp

🚧 Files skipped from review as they are similar to previous changes (1)

• src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.html

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.scss`:
- Line 31: The background-image in rylo-redirect-overlay.component.scss uses an
absolute root path (/assets/rylo-clouds.webp) which breaks when the app is
served from a subpath; update the background-image declaration in
rylo-redirect-overlay.component.scss (the rule setting background-image) to use
a base-href-safe relative asset URL (e.g., remove the leading slash so it points
to "assets/rylo-clouds.webp" or "./assets/rylo-clouds.webp") so the image
resolves correctly regardless of the app base path.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e7f9c3da-9e89-4162-b21f-76b3510c23b4

📥 Commits

Reviewing files that changed from the base of the PR and between db731ad and 4b134fb.

📒 Files selected for processing (3)

• src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.html
• src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.scss
• src/assets/rylo-clouds.webp

🚧 Files skipped from review as they are similar to previous changes (1)

• src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.html