Fix: update font urbanist (#86)

[isaackps]

Fix: update font urbanist

Summary by CodeRabbit

• Style
  • Updated app-wide typography from Gilroy to Urbanist across navigation, cards, headings, buttons, settings, and verification/contact flows.
  • Added regular and italic Urbanist font support.
• Enhancements
  • Improved reCAPTCHA expiration handling with clearer user feedback and form state reset.
  • Enhanced contact form and attachment upload error reporting for better troubleshooting.
• Documentation
  • Added the SIL Open Font License 1.1 text for the Urbanist font.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: ef0db886-2acf-4834-beec-8587ca803574

📥 Commits

Reviewing files that changed from the base of the PR and between 17fdb7b and 9c60a3f.

📒 Files selected for processing (1)

• .github/workflows/e2e.yml

---

📝 Walkthrough

Walkthrough

The PR replaces Gilroy with Urbanist across global styles and UI components, adds the Urbanist license text, extends contact-form reCAPTCHA handling with expiration callbacks and staged exception reporting, and updates the E2E Polygon Amoy RPC endpoint.

Changes

Application updates

Layer / File(s)	Summary
Urbanist font foundation public/fonts/Urbanist/*, src/index.css, tailwind.config.js	Adds Urbanist font-face definitions and license text, updates Tailwind font mapping, and replaces Gilroy typography across global stylesheet rules.
Component and page typography src/components/**, src/pages/**	Updates shared controls, navigation, cards, forms, verification messages, and page headings to use Urbanist classes.
reCAPTCHA expiration and contact errors src/hooks/*, src/components/common/Recaptcha/*, src/pages/Contact/*	Adds typed reCAPTCHA expiration callbacks, wires expiration handling into Contact, and captures upload, presign, expiration, and submission exceptions with staged context.

E2E network configuration

Layer / File(s)	Summary
Polygon Amoy RPC endpoint .github/workflows/e2e.yml	Changes the Polygon Amoy RPC URL used by the E2E dev server.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• TrustVC/trustvc-website#82: Related reCAPTCHA and contact-form workflow changes.
• TrustVC/trustvc-website#84: Related reCAPTCHA expiration callback integration.
• TrustVC/trustvc-website#28: Related shared Button and Tag styling changes.

Suggested reviewers: rishabhs7

🚥 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 matches the main change: updating the app’s font styling to Urbanist.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch develop

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.

🔧 Checkov (3.3.8)

.github/workflows/e2e.yml

Traceback (most recent call last):
File "/usr/local/bin/checkov", line 2, in
from checkov.main import Checkov
ModuleNotFoundError: No module named 'checkov'

---

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.}

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

src/hooks/useContactForm.ts (1)

121-131: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Avoid reporting normal reCAPTCHA expiry as an exception.

Expiry is an expected user event; emitting a new Sentry exception for each expiry can inflate error volume and obscure actionable failures. Keep the field error, but use a metric/breadcrumb if this needs tracking.

Suggested change

-    captureAppException(new Error('reCAPTCHA verification expired'), {
-      source: 'app',
-      tags: { 'recaptcha.event': 'expired' },
-    })

🤖 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/hooks/useContactForm.ts` around lines 121 - 131, Remove the
captureAppException call from handleRecaptchaExpired, while preserving the
recaptcha completion reset and field error update. If expiry tracking is
required, replace exception reporting with the existing metric or breadcrumb
mechanism.

🤖 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/components/common/Tag/Tag.tsx`:
- Line 54: Update the className in the Tag component to use the configured
font-urbanist utility and keep the font weight as a separate valid utility,
replacing the unsupported font-urbanist-bold class while preserving the existing
styling and className composition.

In `@src/hooks/useContactForm.ts`:
- Around line 400-419: Update the presign-response validation in the
pendingItems upload flow to require presigned.length to exactly equal
pendingItems.length before iterating or appending returned keys. Reject
oversized responses as well as missing entries, and preserve the existing error
status and captureAppException handling for the mismatch.

In `@src/index.css`:
- Line 17: Remove the quotes from the single-word Urbanist font-family
declarations in the CSS, updating the declaration at the shown location and
every other listed occurrence while preserving the existing font stack and
formatting.

---

Nitpick comments:
In `@src/hooks/useContactForm.ts`:
- Around line 121-131: Remove the captureAppException call from
handleRecaptchaExpired, while preserving the recaptcha completion reset and
field error update. If expiry tracking is required, replace exception reporting
with the existing metric or breadcrumb mechanism.

🪄 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 Plus

Run ID: c50e1932-caef-4003-b84b-6bac49aaceaf

📥 Commits

Reviewing files that changed from the base of the PR and between c95dcfe and 17fdb7b.

⛔ Files ignored due to path filters (10)

• public/fonts/GilroyBold/font.woff is excluded by !**/*.woff
• public/fonts/GilroyBold/font.woff2 is excluded by !**/*.woff2
• public/fonts/GilroyExtraBold/font.woff is excluded by !**/*.woff
• public/fonts/GilroyExtraBold/font.woff2 is excluded by !**/*.woff2
• public/fonts/GilroyLight/font.woff is excluded by !**/*.woff
• public/fonts/GilroyLight/font.woff2 is excluded by !**/*.woff2
• public/fonts/GilroyMedium/font.woff is excluded by !**/*.woff
• public/fonts/GilroyMedium/font.woff2 is excluded by !**/*.woff2
• public/fonts/Urbanist/Urbanist-Italic-Variable.woff2 is excluded by !**/*.woff2
• public/fonts/Urbanist/Urbanist-Variable.woff2 is excluded by !**/*.woff2

📒 Files selected for processing (23)

• public/fonts/Urbanist/OFL.txt
• src/components/about/CapabilityCard/CapabilityCard.tsx
• src/components/about/EcosystemCard/EcosystemCard.tsx
• src/components/common/AddressBookOverlay/AddressBookOverlay.tsx
• src/components/common/Button/Button.tsx
• src/components/common/FormAlert/FormAlert.tsx
• src/components/common/Icons/Icons.tsx
• src/components/common/Navbar/Navbar.tsx
• src/components/common/PartnerCard/index.tsx
• src/components/common/Recaptcha/Recaptcha.tsx
• src/components/common/Tag/Tag.tsx
• src/components/common/TextAreaField/TextAreaField.tsx
• src/components/common/TextField/TextField.tsx
• src/components/home/PartnersSection/index.tsx
• src/components/home/VerifySection/VerifyError.tsx
• src/hooks/useContactForm.ts
• src/hooks/useRecaptcha.ts
• src/index.css
• src/pages/About/index.tsx
• src/pages/Contact/index.tsx
• src/pages/Partners/index.tsx
• src/pages/Settings/index.tsx
• tailwind.config.js

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Locate relevant files"
git ls-files | rg '(^|/)(Tag\.tsx|tailwind\.config\.js|tailwind\.config\.(js|cjs|ts)|package\.json|postcss\.config\.js)$' || true

echo
echo "Tag.tsx around font usage"
for f in $(git ls-files | rg 'Tag\.tsx$'); do
  echo "--- $f"
  wc -l "$f"
  rg -n "font-urbanist|font-bold|className|TagBorderedLg" "$f" -C 3
done

echo
echo "tailwind.config.js relevant font config"
for f in $(git ls-files | rg '(^|/)tailwind\.config\.js$'); do
  echo "--- $f"
  sed -n '1,200p' "$f" | rg -n "fontFamily|urbanist|font-urbanist|extend|theme" -C 4 || true
done

echo
echo "package tailwind version"
if [ -f package.json ]; then
  cat package.json | jq '.devDependencies.tailwindcss, .dependencies.tailwindcss'
fi

echo
echo "Check whether font-urbanist-bold is defined somewhere as custom Tailwind class"
rg -n "font-urbanist-bold|urbanist-bold|urbanist" --glob '!node_modules' .

Repository: TrustVC/trustvc-website

Length of output: 9079

---

🌐 Web query:

Tailwind CSS custom font families className font-family utility source

💡 Result:

In Tailwind CSS, the approach to custom font families depends on your version [1][2]. Tailwind CSS v4 (Current) In v4, configuration is handled directly in your CSS files using the @theme directive [3][1]. You define custom font families as CSS variables prefixed with --font- [3][4]. 1. Load your font using @font-face or @import in your CSS [3][4]. 2. Define the font in the @theme block: @theme { --font-myfont: "MyFontName", sans-serif; } This automatically generates a utility class named.font-myfont [3][1]. Tailwind CSS v3 (and earlier) In v3 and earlier, configuration is managed via the tailwind.config.js (or.ts) file [5][2]. 1. Load your font using @font-face or @import in your CSS [5]. 2. Add the font to the theme.extend.fontFamily section of your config: // tailwind.config.js module.exports = { theme: { extend: { fontFamily: { myfont: ['"MyFontName"', 'sans-serif'], }, }, }, } This generates the.font-myfont utility class [2]. Key Utility Syntax Regardless of the version, you can always use arbitrary values if you need to apply a font without adding it to your theme configuration [3][4]. Use the square bracket syntax:

Text

Additionally, v4 introduced the font-(family-name:) syntax, which allows you to reference CSS variables directly:

Text

Citations:

• 1: https://fontfyi.com/blog/how-to-add-fonts-tailwind-css/
• 2: https://blog.logrocket.com/custom-fonts-tailwind-css/
• 3: https://tailwindcss.com/docs/font-family
• 4: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/font-family.mdx
• 5: https://v3.tailwindcss.com/docs/font-family

---

Split the Undefined font utility from the weight class.

tailwind.config.js defines font-urbanist, not font-urbanist-bold; Tailwind 3.4.17 won’t generate that class, so this component won’t reliably receive the Urbanist font.

Proposed fix

-      className={`border-4 text-4xl py-2 px-4 font-urbanist-bold ${className}`}
+      className={`border-4 text-4xl py-2 px-4 font-urbanist font-bold ${className}`}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	className={`border-4 text-4xl py-2 px-4 font-urbanist-bold ${className}`}
	className={`border-4 text-4xl py-2 px-4 font-urbanist font-bold ${className}`}

🤖 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/components/common/Tag/Tag.tsx` at line 54, Update the className in the
Tag component to use the configured font-urbanist utility and keep the font
weight as a separate valid utility, replacing the unsupported font-urbanist-bold
class while preserving the existing styling and className composition.

[coderabbitai]

🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win

Reject oversized presign responses too.

This only detects missing entries. If the API returns more URLs than pending files, Line 471 appends every returned key—including keys for files never uploaded—to the service request. Require an exact one-to-one count before uploading.

Suggested change

             const presigned = await getPresignedUrls(files)
+            if (presigned.length !== pendingItems.length) {
+              const error = new Error('Unexpected number of upload URLs returned.')
+              pendingItems.forEach(item =>
+                setAttachmentStatus(item.id, {
+                  status: 'error',
+                  error: 'Unable to prepare this file for upload.',
+                })
+              )
+              captureAppException(error, {
+                source: 'support-api',
+                tags: { 'upload.stage': 'presign_mismatch' },
+                extra: {
+                  pendingCount: pendingItems.length,
+                  presignedCount: presigned.length,
+                },
+              })
+              setSubmitError('Unable to prepare attachments. Please try again.')
+              return
+            }

             const uploadResults = await Promise.allSettled(

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	pendingItems.map((item, index) => {
	const p = presigned[index]
	if (!p) {
	setAttachmentStatus(item.id, {
	status: 'error',
	error: 'No upload URL was returned for this file.',
	})
	return Promise.reject(
	new Error('No upload URL was returned for this file.')
	const error = new Error(
	'No upload URL was returned for this file.'
	)
	captureAppException(error, {
	source: 'support-api',
	tags: { 'upload.stage': 'presign_mismatch' },
	extra: {
	pendingCount: pendingItems.length,
	presignedCount: presigned.length,
	missingIndex: index,
	},
	})
	return Promise.reject(error)
	const presigned = await getPresignedUrls(files)
	if (presigned.length !== pendingItems.length) {
	const error = new Error('Unexpected number of upload URLs returned.')
	pendingItems.forEach(item =>
	setAttachmentStatus(item.id, {
	status: 'error',
	error: 'Unable to prepare this file for upload.',
	})
	)
	captureAppException(error, {
	source: 'support-api',
	tags: { 'upload.stage': 'presign_mismatch' },
	extra: {
	pendingCount: pendingItems.length,
	presignedCount: presigned.length,
	},
	})
	setSubmitError('Unable to prepare attachments. Please try again.')
	return
	}
	const uploadResults = await Promise.allSettled(

🤖 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/hooks/useContactForm.ts` around lines 400 - 419, Update the
presign-response validation in the pendingItems upload flow to require
presigned.length to exactly equal pendingItems.length before iterating or
appending returned keys. Reject oversized responses as well as missing entries,
and preserve the existing error status and captureAppException handling for the
mismatch.

[coderabbitai]

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Remove unnecessary quotes around Urbanist.

Stylelint 17.14.0 reports font-family-name-quotes errors on these changed declarations. Use Urbanist without quotes for single-word family names.

Proposed fix

-  font-family: 'Urbanist';
+  font-family: Urbanist;

Apply the same change at every listed line.

Also applies to: 26-26, 77-77, 435-435, 444-444, 3506-3506, 3837-3837, 3911-3911, 4438-4438

🧰 Tools

🪛 Stylelint (17.14.0)

[error] 17-17: Expected no quotes around "Urbanist" (font-family-name-quotes)

(font-family-name-quotes)

🤖 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/index.css` at line 17, Remove the quotes from the single-word Urbanist
font-family declarations in the CSS, updating the declaration at the shown
location and every other listed occurrence while preserving the existing font
stack and formatting.

Source: Linters/SAST tools