Repository navigation
Refine mobile spacing and typography across Home, Spend, Workspaces, and Account - #100187
Draft
shawnborton wants to merge 28 commits into
Draft
shawnborton wants to merge 28 commits into
shawnborton wants to merge 28 commits into
Conversation
# Conflicts: # src/libs/Navigation/helpers/calculateSuperWideRHPWidth/index.ts # src/styles/variables.ts
# Conflicts: # src/libs/Navigation/helpers/calculateSuperWideRHPWidth/index.ts # src/styles/index.ts # src/styles/variables.ts
Contributor
|
🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
# Conflicts: # src/pages/settings/Wallet/WalletPage/index.tsx
Contributor
|
🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Contributor
|
🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
…2 alert titles, fix L3 tap-outside dismiss
Contributor
|
🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
…size the search router popover
Contributor
🦜 Polyglot Parrot! 🦜Squawk! Looks like you added some shiny new English strings. Allow me to parrot them back to you in other tongues: View the translation diffdiff --git a/src/languages/de.ts b/src/languages/de.ts
index 24018cc0..0b0b56b6 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -951,7 +951,7 @@ const translations: TranslationDeepObject<typeof en> = {
tooltip: 'Starte hier!',
},
homePage: {
- forYou: 'Für dich',
+ forYou: 'Aufgaben',
timeSensitiveSection: {
title: 'Zeitkritisch',
addShippingAddress: {title: 'Wir benötigen deine Versandadresse', subtitle: 'Geben Sie eine Adresse an, um Ihre Expensify Karte zu erhalten.', cta: 'Adresse hinzufügen'},
diff --git a/src/languages/el.ts b/src/languages/el.ts
index 54f6f2cc..d0c3a87e 100644
--- a/src/languages/el.ts
+++ b/src/languages/el.ts
@@ -970,7 +970,7 @@ const translations: TranslationDeepObject<typeof en> = {
tooltip: 'Ξεκινήστε εδώ!',
},
homePage: {
- forYou: 'Για εσάς',
+ forYou: 'Εκκρεμότητες',
timeSensitiveSection: {
title: 'Χρονικά ευαίσθητο',
ctaFix: 'Διόρθωση',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 7b195ae1..c1c2a445 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -930,7 +930,7 @@ const translations: TranslationDeepObject<typeof en> = {
tooltip: '¡Comienza aquí!',
},
homePage: {
- forYou: 'Para ti',
+ forYou: 'Tareas pendientes',
timeSensitiveSection: {
title: 'Requiere atención inmediata',
ctaFix: 'Corrige',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index e6c264b6..984a114b 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -954,7 +954,7 @@ const translations: TranslationDeepObject<typeof en> = {
tooltip: 'Commencez ici !',
},
homePage: {
- forYou: 'Pour vous',
+ forYou: 'Tâches à faire',
timeSensitiveSection: {
title: 'Urgent',
addShippingAddress: {title: 'Nous avons besoin de votre adresse de livraison', subtitle: 'Indiquez une adresse pour recevoir votre Carte Expensify.', cta: 'Ajouter une adresse'},
diff --git a/src/languages/it.ts b/src/languages/it.ts
index af765f00..855a8a04 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -952,7 +952,7 @@ const translations: TranslationDeepObject<typeof en> = {
tooltip: 'Inizia qui!',
},
homePage: {
- forYou: 'Per te',
+ forYou: 'Attività da fare',
timeSensitiveSection: {
title: 'Sensibile al tempo',
addShippingAddress: {title: 'Ci serve il tuo indirizzo di spedizione', subtitle: 'Fornisci un indirizzo per ricevere la tua Carta Expensify.', cta: 'Aggiungi indirizzo'},
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 9a2fdba5..a2494dcb 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -942,7 +942,7 @@ const translations: TranslationDeepObject<typeof en> = {
tooltip: 'ここから始めましょう！',
},
homePage: {
- forYou: 'あなた向け',
+ forYou: 'To-do リスト',
timeSensitiveSection: {
title: '時間に敏感',
addShippingAddress: {title: '配送先住所が必要です', subtitle: 'Expensify カードを受け取る住所を入力してください。', cta: '住所を追加'},
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index e4e199c4..bfbe6173 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -950,7 +950,7 @@ const translations: TranslationDeepObject<typeof en> = {
tooltip: 'Begin hier!',
},
homePage: {
- forYou: 'Voor jou',
+ forYou: 'To-do’s',
timeSensitiveSection: {
title: 'Tijdgevoelig',
addShippingAddress: {title: 'We hebben je verzendadres nodig', subtitle: 'Geef een adres op om je Expensify Kaart te ontvangen.', cta: 'Adres toevoegen'},
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index 70099c10..1f601502 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -958,7 +958,7 @@ const translations: TranslationDeepObject<typeof en> = {
tooltip: 'Zacznij tutaj!',
},
homePage: {
- forYou: 'Dla ciebie',
+ forYou: 'Zadania',
timeSensitiveSection: {
title: 'Wymaga szybkiej reakcji',
addShippingAddress: {title: 'Potrzebujemy Twojego adresu wysyłki', subtitle: 'Podaj adres, na który mamy wysłać twoją Kartę Expensify.', cta: 'Dodaj adres'},
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index e2287f3e..a445dc8f 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -950,7 +950,7 @@ const translations: TranslationDeepObject<typeof en> = {
tooltip: 'Comece aqui!',
},
homePage: {
- forYou: 'Para você',
+ forYou: 'Afazeres',
timeSensitiveSection: {
title: 'Urgente',
addShippingAddress: {title: 'Precisamos do seu endereço de entrega', subtitle: 'Informe um endereço para receber seu Cartão Expensify.', cta: 'Adicionar endereço'},
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index 6c75d766..8bf008f4 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -917,7 +917,7 @@ const translations: TranslationDeepObject<typeof en> = {
tooltip: '从这里开始！',
},
homePage: {
- forYou: '为你',
+ forYou: '待办事项',
timeSensitiveSection: {
title: '时间敏感',
addShippingAddress: {title: '我们需要您的收货地址', subtitle: '请提供一个地址以接收您的 Expensify 卡。', cta: '添加地址'},
Note You can apply these changes to your branch by copying the patch to your clipboard, then running |
Contributor
|
🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
Contributor
|
🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
Contributor
|
🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
# Conflicts: # src/components/BaseWidgetItem.tsx # src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx # src/languages/en.ts # src/pages/home/ForYouSection/index.tsx # src/pages/home/TimeSensitiveSection/TimeSensitiveGroup.tsx # src/pages/home/TimeSensitiveSection/useTimeSensitiveItems.tsx # src/pages/home/UpcomingTravelSection/UpcomingTravelItem.tsx # src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountFlowEntryPoint.tsx # src/styles/index.ts
# Conflicts: # assets/images/concierge.svg # src/components/SidePanel/SidePanelButton/SidePanelButtonBase.tsx # src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts
Contributor
|
🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
Contributor
|
🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
This was referenced Sep 10, 2026
Merged
38 of 40 tasks
# Conflicts: # src/pages/inbox/sidebar/InboxTabSelector.tsx
38 of 40 tasks
Contributor
|
🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
Contributor
|
🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
Contributor
|
🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
Contributor
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
This branch has not been deployed
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.
Explanation of Change
This is a design exploration of mobile spacing, typography, and layout across Home, Spend, Workspaces, and Account. It is UI only — no logic, data, or API changes.
Typography
labelStrong(13px bold) instead of 17px. This covers the Home widget cards and every settings or workspace card that passesaccountSettingsSectionTitle. Two Subscription cards that set their own bold style now share that style so they match.Home
theme.icon.Spend
Workspaces
Tablecomponent, so every table in the app picks it up on mobile.Account
One shared bug fixed
Imageis memoized onsourcealone, sostylechanges never reached the DOM and a responsive avatar kept its mount-time size.AvatarImagenow keys the image by size. Addingstyleto the comparator would have disabled memoization for every image in the app, since the style arrives as a fresh array each render.Fixed Issues
$
PROPOSAL:
Tests
Offline tests
QA Steps
Same as tests.
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectionAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari