Preview - #238
Open
Vanessa-Kris wants to merge 17 commits into
Open
Conversation
…ations for changelog
chore: update uuid dependency to version 14.0.0 in package.json and y…
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refreshes the RelaySMS website UI/IA by adding an About page, expanding navigation (Developers menu + Download entry), and introducing newsletter subscription UX (form + result pages), along with supporting i18n updates and a dependency override update.
Changes:
- Add About page and wire it into routing/navigation.
- Add newsletter subscription form (footer) plus subscribed/unsubscribed/error pages.
- Update navbar/CTA sections, download page visuals, FAQ content, and multiple locale strings; update
uuidoverride/resolution and lockfile.
Reviewed changes
Copilot reviewed 23 out of 25 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Updates resolved dependency graph (notably uuid). |
| src/theme.js | Adjusts dark theme palette colors. |
| src/Pages/NewsletterUnsubscribed.js | New “unsubscribed” confirmation page. |
| src/Pages/NewsletterSubscribed.js | New “subscribed” success page with styled background. |
| src/Pages/NewsletterConfirmationError.js | New “confirmation error” page with embedded newsletter form. |
| src/Pages/Downlaod.js | Updates download page cards/visuals and spacing. |
| src/Pages/Contributing.js | Updates community links/CTAs and adds a new info section. |
| src/Pages/Contact.js | Adds Telegram community CTA section. |
| src/Pages/About.js | New About page with illustration and CTAs. |
| src/Components/WhoShouldUse.js | Formatting + adds “Learn More” link to system overview. |
| src/Components/NewsletterForm.js | New reusable newsletter subscription form component. |
| src/Components/Navbar.js | Adds About link, Developers dropdown, and Download entry (desktop + mobile). |
| src/Components/Hero.js | Adjusts section spacing/wrapping on landing page. |
| src/Components/GettingStarted.js | Updates Getting Started header/subheader copy and layout width. |
| src/Components/Footer.js | Adds newsletter form and introduces a Changelog link in footer resources. |
| src/Components/FAQ.js | Adds an additional FAQ item. |
| src/Components/Blog.js | Adds (currently unused) newsletter form import and keeps Telegram CTA. |
| src/App.js | Adds routes for About + newsletter-related pages. |
| public/locales/fr/translation.json | Adds Developers/Changelog + newsletter/changelog strings and new contributing strings. |
| public/locales/fa/translation.json | Adds Developers/Changelog + newsletter/changelog strings and new contributing strings. |
| public/locales/es/translation.json | Adds newsletter/changelog strings; modifies “Howitworks” translations. |
| public/locales/en/translation.json | Updates various landing/how-it-works strings; adds newsletter/changelog strings. |
| package.json | Adds uuid override/resolution range (>=11.1.1). |
| nginx/nginx.conf.template | Adds a trailing newline/blank line. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
6
to
8
| import { useTranslation } from "react-i18next"; | ||
| import NewsletterForm from "./NewsletterForm"; | ||
|
|
Comment on lines
3
to
+18
| import { | ||
| FaGithub, | ||
| FaCodeBranch, | ||
| FaBug, | ||
| FaMobileScreen, | ||
| FaStar, | ||
| FaCircleDot, | ||
| FaArrowUpRightFromSquare, | ||
| FaBook, | ||
| FaUsers, | ||
| FaPenToSquare | ||
| } from "react-icons/fa6"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { useTheme } from "@mui/material/styles"; | ||
| import { FaTelegram } from "react-icons/fa6"; | ||
| import NewsletterForm from "../Components/NewsletterForm"; |
| { | ||
| title: t("Footer.Resources"), | ||
| links: [ | ||
| { label: t("Footer.Changelog", "Changelog"), to: "/changelog" }, |
| "underscore": ">=1.13.7", | ||
| "serialize-javascript": ">=7.0.0", | ||
| "fast-uri": ">=3.1.2", | ||
| "uuid": ">=11.1.1", |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 16 out of 18 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (8)
src/Pages/Contributing.js:17
- FaTelegram is imported via a second
react-icons/fa6import even though the file already has a grouped import from the same module. Consolidating into a single import keeps imports tidy and avoids duplicated module specifiers.
} from "react-icons/fa6";
import { useTranslation } from "react-i18next";
import { useTheme } from "@mui/material/styles";
import { FaTelegram } from "react-icons/fa6";
src/Components/Navbar.js:237
- The Developers should have a stable id and be linked back to its trigger button via
aria-labelledbyso assistive tech can correctly announce the relationship.
<Menu
anchorEl={anchorElDevelopers}
open={Boolean(anchorElDevelopers)}
onClose={handleCloseDevelopersMenu}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
package.json:48
- The override
uuid: ">=11.1.1"forces Yarn to pick a potentially incompatible major for transitive dependents. In the current lockfile,sockjs@^0.3.24declaresuuid: ^8.3.2, but the override resolves uuid to 14.0.0, which can break runtime behavior or tooling ifsockjsrelies on v8-era APIs. Consider pinning uuid to a compatible patched 8.x range, or upgrading the dependent (e.g., sockjs / webpack-dev-server) to a version that supports the newer uuid major before raising the override.
"uuid": ">=11.1.1",
package.json:87
resolutions.uuidis set to an open-ended>=11.1.1, which currently resolves to uuid 14.0.0 inyarn.lockdespitesockjsrequesting^8.3.2. This kind of cross-major forced resolution is risky; it’s safer to keep the resolution within the dependent’s supported major, or upgrade the dependent first.
"uuid": ">=11.1.1",
src/Components/Navbar.js:214
- The "Developers" menu trigger button is missing the standard ARIA attributes (
aria-controls,aria-haspopup,aria-expanded) and an id to associate it with the dropdown menu. Adding these improves screen-reader and keyboard navigation support.
This issue also appears on line 233 of the same file.
<Button
onClick={handleOpenDevelopersMenu}
endIcon={<KeyboardArrowDownIcon fontSize="small" />}
sx={{
src/Pages/Changelog.js:6
- This page currently renders only a "coming soon" heading, but the PR also adds a full
public/changelog/content structure (index + markdown entries + authoring guide) and extensive i18n strings that are currently unused. Either wire this page up to load and renderpublic/changelog/index.json+ markdown entries, or defer adding the changelog content scaffolding until the UI is ready, to avoid dead assets and confusion for maintainers.
const Changelog = () => {
const { t } = useTranslation();
public/changelog/2026-06-02-changelog-page-launch.md:17
- This changelog entry claims impact-grouping, a pinned "What's New" section, and markdown-backed publishing are already implemented, but the current
/changelogroute renders only a "coming soon" placeholder. The entry should reflect what is actually shipped to users to avoid misleading release notes.
- Added a dedicated `/changelog` route in the website app.
- Introduced impact-based grouping so updates are easier to scan.
- Pinned the latest updates in a top "What's New" section.
- Added markdown-backed content support so non-technical teammates can publish updates without touching React code.
public/changelog/README.md:3
- The README states this folder "powers" the
/changelogpage, but the current/changelogroute is a placeholder and does not load these files yet. Wording it as "intended to power" (or similar) will prevent confusion for future contributors.
This folder powers the website changelog at `/changelog`.
add mailinglist form and about
| import { FaTelegram } from "react-icons/fa6"; | ||
| import { keyframes } from "@emotion/react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import NewsletterForm from "./NewsletterForm"; |
| import { useTranslation } from "react-i18next"; | ||
| import { useTheme } from "@mui/material/styles"; | ||
| import { FaTelegram } from "react-icons/fa6"; | ||
| import NewsletterForm from "../Components/NewsletterForm"; |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 24 out of 26 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (5)
src/Components/Footer.js:22
- The footer links to "/changelog", but there is no matching route/page in the app (no /changelog route under src/App.js and no changelog page in src). This will send users to the 404 page.
{ label: t("Footer.Changelog", "Changelog"), to: "/changelog" },
src/Components/Blog.js:7
- NewsletterForm is imported but never used (the only occurrence is commented out later). Keeping the unused import increases bundle/maintenance noise.
import { useTranslation } from "react-i18next";
import NewsletterForm from "./NewsletterForm";
src/Pages/Contributing.js:18
- NewsletterForm is imported but not used (the only JSX is commented out). This should be removed to avoid dead code and keep imports tidy.
import { FaTelegram } from "react-icons/fa6";
import NewsletterForm from "../Components/NewsletterForm";
public/locales/es/translation.json:56
- The Spanish locale removed Howitworks.Step1Title/Step1Desc/Step1Button, but the GettingStarted UI still references these keys (e.g. t("Howitworks.Step1Title")). This will render missing-key fallbacks for Spanish users.
"Step2Title": "Crea una cuenta",
public/locales/en/translation.json:191
- The newsletter title string "Subscribe to MailingList" reads like a typo/inconsistent casing and doesn’t match the wording used elsewhere (e.g. Footer.NewsletterTitle).
"title": "Subscribe to MailingList",
update translation and email confirmation page
| const buttonLabel = isSubmitting | ||
| ? t("Newsletter.subscribing", "Subscribing…") | ||
| : t("Newsletter.submit", "Subscribe"); | ||
| const successTitle = |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 28 out of 31 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (6)
public/locales/es/translation.json:80
- These Spanish strings appear to have regressed to English (Step 1). This will show mixed-language UI in
eslocale. Please translate them or restore the previous Spanish values.
"Step1Button": "Download",
"Step1Title": "Download the App",
"Step1Desc": "Download the RelaySMS App from <a href='https://play.google.com/store/apps/details?id=com.afkanerd.sw0b' target='_blank' rel='noopener noreferrer'>Google PlayStore</a>, <a href='https://github.com/smswithoutborders/RelaySMS-Android' target='_blank' rel='noopener noreferrer'>GitHub</a>, or <a href='https://play.google.com/store/apps/details?id=com.afkanerd.sw0b' target='_blank' rel='noopener noreferrer'>build it from source</a>. Ensure your Android device meets the technical requirements (Android 6.0+ with SMS capability)."
src/Pages/Contributing.js:18
NewsletterFormis imported but never used in this file, which can cause lint warnings and adds unnecessary code to the bundle. Remove the unused import (or render the component if it’s intended to be used here).
import NewsletterForm from "../Components/NewsletterForm";
src/Components/WhoShouldUse.js:223
- This is an internal navigation (
/system-overview) but it’s opened in a new tab (target="_blank"). That’s unexpected for in-app routes and can be confusing for users (and unnecessaryrelnoise). Prefer same-tab navigation for internal links.
<Button
component="a"
href="/system-overview"
target="_blank"
rel="noopener noreferrer"
variant="text"
src/Pages/NewsletterConfirmationError.js:69
- There’s an extra blank line between JSX props here (line with only whitespace). It’s easy to miss in reviews and tends to fail formatting/lint rules; please remove it.
<NewsletterForm
showHeading={false}
adaptiveButtonContrast
sx={{ width: "100%", maxWidth: 520, pt: 1 }}
public/locales/en/translation.json:201
- Minor copy/spacing issue: “Subscribe to MailingList” is missing a space and reads like a concatenated token. Consider changing it to “Subscribe to our newsletter” (or “Subscribe to mailing list”).
"title": "Subscribe to MailingList",
src/Components/FAQ.js:123
- Using a hard-coded index (
idx === 4) to decide when to render a<Trans>block is brittle—adding/reordering FAQs will silently break this behavior. Use a condition derived from the data (e.g., last item) or store a flag on the FAQ entry.
{idx === 4 ? (
update package.json
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 28 out of 31 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (7)
src/Pages/Downlaod.js:247
- Same
.download-visualwrapper spacing issue as above (child margin is inside a non-flex wrapper). Making the wrapper a flex container preserves the intended spacing and keeps the hover transform scoped to the icon/image.
<Box className="download-visual">{renderLinkVisual(item.imgSrc, item.title)}</Box>
src/Components/Footer.js:113
Gridbreakpoint props are intended to be whole-number column counts (1–12). Usinglg={2.2}can produce warnings and inconsistent sizing across breakpoints; use an integer value and rebalance the column widths instead.
xs={12}
sm={6}
md={6}
lg={2.2}
key={index}
src/Pages/Downlaod.js:167
.download-visualwraps the image/icon returned byrenderLinkVisual, but since the wrapper is not a flex container, the child'smr: 3doesn't reliably create spacing between the visual and the text column. Making the wrapper a flex container keeps the intended spacing and ensures the hover transform targets the whole visual block.
This issue also appears on line 247 of the same file.
<Box className="download-visual">{renderLinkVisual(item.imgSrc, item.title)}</Box>
src/Components/NewsletterForm.js:47
successTitleis declared but never used, which will typically fail linting (no-unused-vars) and adds confusion about the reachable states (no code setsstatusto "success"). Remove the unused constant (or wire it into the rendered success UI).
const successTitle =
status === "doubleOptIn"
? t("Newsletter.doubleOptInTitle", "Check your inbox.")
: t("Newsletter.successTitle", "You're subscribed.");
src/Components/Navbar.js:240
- The Developers menu trigger button is missing the usual ARIA attributes (
aria-haspopup,aria-expanded,aria-controls) needed for assistive technologies to understand it opens a menu and whether it’s currently expanded.
<Button
onClick={handleOpenDevelopersMenu}
endIcon={<KeyboardArrowDownIcon fontSize="small" />}
sx={{
src/Pages/Contributing.js:18
NewsletterFormis imported here but never used in this file, which will typically fail linting/builds with unused-import rules. Remove the unused import (or add the component usage if intended).
import { FaTelegram } from "react-icons/fa6";
import NewsletterForm from "../Components/NewsletterForm";
src/Components/Blog.js:7
NewsletterFormis imported but not referenced anywhere in this component, which will typically fail linting (no-unused-vars/ unused imports). Remove the import if it’s not needed.
import NewsletterForm from "./NewsletterForm";
update hero button
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 28 out of 31 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (12)
src/Components/Blog.js:7
NewsletterFormis imported but never used in this component, which will typically fail lint/build (unused import).
import NewsletterForm from "./NewsletterForm";
src/Components/NewsletterForm.js:43
successTitleis computed but never used anywhere in the rendered JSX, so it becomes dead code (and will typically trigger a no-unused-vars lint error if you later refactor to destructure/inline).
const successTitle =
status === "doubleOptIn"
? t("Newsletter.doubleOptInTitle", "Check your inbox.")
: t("Newsletter.successTitle", "You're subscribed.");
src/Components/NewsletterForm.js:93
- After removing the unused
successstate, this message should not reference it; otherwise thesuccessBodybranch is unreachable and can be removed/simplified.
const statusMessage =
status === "doubleOptIn" ? doubleOptInBody : status === "success" ? successBody : "";
src/Components/NewsletterForm.js:47
successBodyis no longer used once thesuccessstatus branch is removed fromstatusMessage, so it should be deleted to avoid an unused variable.
const successBody = t(
"Newsletter.successHint",
"Thanks. Please check your email to confirm your subscription."
);
src/Pages/Contributing.js:7
- This file imports
FaTelegramtwice and also importsNewsletterFormwithout using it; unused/redundant imports will usually break lint/build and make the import list harder to maintain.
import {
FaGithub,
FaCodeBranch,
FaBug,
FaMobileScreen,
src/Pages/Contact.js:207
- There is a commented-out
NewsletterFormblock left in the JSX. Keeping dead/commented code in production components makes maintenance harder and can confuse future refactors.
{/* <NewsletterForm
showHeading={false}
align="center"
sx={{ width: "100%", maxWidth: 620 }}
/> */}
src/Components/NewsletterForm.js:23
statusis never set to"success", so checking for it here adds a dead state and makes the form logic harder to reason about.
This issue also appears in the following locations of the same file:
- line 40
- line 44
- line 92
const showForm = status !== "success" && status !== "doubleOptIn";
public/locales/en/translation.json:201
- This string has a missing space and reads like a placeholder ("MailingList"). It will be user-visible in the newsletter form heading.
"title": "Subscribe to MailingList",
public/locales/en/translation.json:435
- Capitalization/grammar: this title should be "GitHub Contribution Guide" ("Contribution" capitalized) for a proper heading.
"title": "GitHub contribution Guide",
public/locales/en/translation.json:485
- Grammar: "a Gateway Clients" is incorrect (singular article + plural noun). This is user-visible copy.
"title": "Be a crucial part of RelaySMS by setting up a Gateway Clients",
public/locales/fr/translation.json:552
- These French strings are missing required accents (e.g., "rôle", "numéro", "région") and will be user-visible.
"title": "Jouez un role essentiel dans RelaySMS en configurant des Gateway Clients",
"description": "Lorsque vous configurez un Gateway Client (numero de telephone) dans une region avec une connexion internet, ce numero aide a acheminer les messages des utilisateurs hors ligne vers des plateformes en ligne.",
"cta": "Tout savoir sur les Gateway Clients"
public/locales/es/translation.json:80
- These Step 1 strings are in English inside the Spanish locale file, so Spanish users will see English (and
Step1Title/Step1Deschave no code fallback defaults).
"Step1Button": "Download",
"Step1Title": "Download the App",
"Step1Desc": "Download the RelaySMS App from <a href='https://play.google.com/store/apps/details?id=com.afkanerd.sw0b' target='_blank' rel='noopener noreferrer'>Google PlayStore</a>, <a href='https://github.com/smswithoutborders/RelaySMS-Android' target='_blank' rel='noopener noreferrer'>GitHub</a>, or <a href='https://play.google.com/store/apps/details?id=com.afkanerd.sw0b' target='_blank' rel='noopener noreferrer'>build it from source</a>. Ensure your Android device meets the technical requirements (Android 6.0+ with SMS capability)."
update set-up steps
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 30 out of 36 changed files in this pull request and generated no new comments.
Suppressed comments (8)
src/Pages/Contributing.js:18
- There are redundant imports from "react-icons/fa6" (FaTelegram is imported separately) and NewsletterForm is imported but not used. This adds noise and may fail linting for unused imports.
import { FaTelegram } from "react-icons/fa6";
import NewsletterForm from "../Components/NewsletterForm";
src/Components/Blog.js:7
- NewsletterForm is imported but never used in this file. Keeping unused imports can break CI when lint rules enforce no-unused-vars.
import NewsletterForm from "./NewsletterForm";
src/Components/FAQ.js:141
- The special-case rendering for idx === 4 is unreachable because the FAQs array currently contains only 4 items (FAQ5 is commented out). This dead branch makes the component harder to maintain and can hide translation issues.
{idx === 4 ? (
<Trans
i18nKey="Faq.faq5.answer"
components={{
docLink: (
<a
href="https://docs.smswithoutborders.com/docs/Troubleshooting/Troubleshooting-FAQ"
target="_blank"
rel="noopener noreferrer"
/>
),
emailLink: <a href="mailto:developers@smswithoutborders.com" />
}}
/>
) : (
answer
)}
src/Components/FAQ.js:3
- Trans is only used by a special-case rendering branch that is currently unreachable (the FAQ5 item is commented out). Removing the dead branch (see below) also means this import should be removed to avoid unused-import lint issues.
This issue also appears on line 125 of the same file.
import { Trans, useTranslation } from "react-i18next";
src/Pages/NewsletterSubscribed.js:7
- "farshi" is not a supported language code (supportedLngs in src/i18n.js is ["en","es","fr","fa"]). This condition will never be true and can be simplified.
src/Pages/NewsletterUnsubscribed.js:7 - "farshi" is not a supported language code (supportedLngs in src/i18n.js is ["en","es","fr","fa"]). This condition will never be true and can be simplified.
src/Pages/NewsletterConfirmationError.js:7 - "farshi" is not a supported language code (supportedLngs in src/i18n.js is ["en","es","fr","fa"]). This condition will never be true and can be simplified.
const isRtl = i18n.language === "fa" || i18n.language === "farshi";
src/Pages/About.js:178
- "farshi" is not a supported language code (supportedLngs in src/i18n.js is ["en","es","fr","fa"]). This condition will never be true and can be simplified.
const isRtl = i18n.language === "fa" || i18n.language === "farshi";
…tions in multiple languages
update error handling in NewsletterForm component and improve transla…
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 30 out of 36 changed files in this pull request and generated no new comments.
Suppressed comments (6)
src/Components/NewsletterForm.js:76
fetch(..., { mode: "no-cors" })always returns an opaque response, so this code cannot tell whether the subscription request succeeded or failed (e.g., server-side validation / rate limiting). The UI will always advance to the “check your inbox” state even on non-2xx HTTP responses.
await fetch(NEWSLETTER_SUBMIT_URL, {
method: "POST",
mode: "no-cors",
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
src/Components/NewsletterForm.js:87
- The fallback newsletter error message is missing punctuation, making it hard to read. Since this can be displayed to end users (when the i18n key is missing), it should be a complete sentence.
const fallbackError = t(
"Newsletter.error",
"Something went wrong, not your fault please try again later"
);
src/Components/FAQ.js:30
- The
Faq.faq5entry is commented out, but the render logic still checksidx === 4to render a special answer. With only 4 items infaqs, this branch is unreachable and FAQ #5 never appears.
// {
// question: t("Faq.faq5.question"),
// answer: t("Faq.faq5.answer")
// }
];
src/Pages/Contributing.js:18
FaTelegramis imported twice from the same module andNewsletterFormis imported but never used in this file. This will trigger unused-import linting and makes the imports harder to maintain.
import { useTranslation } from "react-i18next";
import { useTheme } from "@mui/material/styles";
import { FaTelegram } from "react-icons/fa6";
import NewsletterForm from "../Components/NewsletterForm";
src/Components/Blog.js:7
NewsletterFormis imported but not used anywhere in this component, which will cause an unused-import lint error.
import { useTranslation } from "react-i18next";
import NewsletterForm from "./NewsletterForm";
src/Components/NewsletterForm.js:47
successTitleis defined but never used, andstatus === "success"is never set anywhere. This is likely to tripno-unused-varslinting and makes the component state machine harder to follow.
This issue also appears in the following locations of the same file:
- line 72
- line 84
const successTitle =
status === "doubleOptIn"
? t("Newsletter.doubleOptInTitle", "Check your inbox.")
: t("Newsletter.successTitle", "You're subscribed.");
const successBody = t(
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.