Implement our headline font Expensify New Kansas

[shawnborton]

We finally have font files for New Kansas, woo! So now let's implement it.

For now, I believe the only weight we use in our brand will be "Medium" and "Medium Italic." I've packaged up both of those in .otf and .woff/.woff2 format here: ExpensifyNewKansas.zip

In terms of implementation, there are a few areas where we'll want to begin with this:

The Chats header in the top left:

Workspace editor card titles:

Name in Settings:

Big Number Pad:

And the in places like the full screen empty state, as well as some "Success" moments like when you add a bank account, etc (I am having a hard time digging up those screenies though!)

cc @grgia @Luke9389 @roryabraham in case any of you want to take this one for implementation. This is one of the last bits of implementing our core brand.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0129e2192610c499ad
• Upwork Job ID: 1618076125316882432
• Last Price Increase: 2023-01-25

[luacmartins]

I can work on this!

[Luke9389]

Woohoo! So stoked to see this in action!

[Luke9389]

@luacmartins adding new fonts comes along with a few 'gotcha's, so let me know if you run into anything funky.

[shawnborton]

Woo, thanks Carlos!

[luacmartins]

Thanks @Luke9389! I'll let you know if I have any questions!

@shawnborton could you please confirm the following:

1. Chats - the LHN header shares the same styles with our HeaderWithCloseButton component, i.e. the type of headers seen below. Do we want to update all instances of HeaderWithCloseButton as well or just the one in the LHN?

2. Name in Settings - currently, this page shares the same styles with the pages below. Do we want to update all instances or just the one in InitialSettingsPage?

   • DetailsPage - when you click at the chat header and see someone's details
   • WorkspaceIntialPage - Workspace name in the Workspace initial page

3. Full screen empty state - I'm not sure which page this is. Do you have a mock of the page so I can try to locate it in App?

4. Some "Success" moments - Right now the pages below share the same style with Workspace editor card titles. Do we want to update all of them? Are there other "success" moments that should be updated?

   • BankAccount > EnableStep
   • RequestCallPage
   • GetAssistancePage

[shawnborton]

1. For this one, I think we only want this on the LHN for now.
2. I like using this again in DetailsPage as well as WorkspaceInitialPage.
3. It looks something like this:
4. In these success moments, they kind of look like the screen above however they have a generic "tada" image. Actually maybe if you search the code for tada.svg it will lead you to the right place? For these, we just want the headline immediately under the tada image to use the headline font. Similarly, there is a screen we use when we review account details. I think you can find examples of them here actually.

[luacmartins]

PR here

[luacmartins]

The PR has been on prod for 2 weeks. Adding the Bug label to get a BZ assigned and process payment!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0129e2192610c499ad

[melvin-bot]

Current assignee @parasharrajat is eligible for the Internal assigner, not assigning anyone new.

[luacmartins]

@alexpensify could you help pay @parasharrajat for the review in this PR? The regression period is over since that PR hit prod 2 weeks ago.

[alexpensify]

@parasharrajat - I've submitted an offer via Upwork. Please confirm you received it and I can close out this GH. Thanks!

[alexpensify]

@parasharrajat - checking in, I see the offer is still pending in Upwork. When you get a chance, can you please confirm you received it? Thanks!

[parasharrajat]

@alexpensify Accepted it.

[alexpensify]

Thanks! I've completed the payment process.