Empty State Design #13647

dangrous · 2022-12-15T22:49:26Z

Details

This is updating the new chat imagery to match the new designs. This shows when a new chat is created, or when you scroll to the top of an existing chat.

Some things to note:

The original designs were not in dark mode, they have been adapted appropriately.
The new headline font is not available yet; this currently only changes the sizing (but it will be a quick swap in the styles file when it is ready). I believe this should NOT block this PR, however. Is that correct @shawnborton?
There is one spelling fix I noticed in an unrelated translation name. If we feel strongly I can remove this, but it was a quick fix (and I made sure that it is changed in all usages)
Translations and copy are currently being reviewed/approved but I wanted to get this out for review sooner rather than later.
The code handling the background image, frankly, a bit messy. React Native was not playing well with the background image and so it feels a bit hacky. However, after about a week of struggle, this is the best I could come up with. If you can figure out a better alternative please let me know! I will not be sad if you criticize.

Fixed Issues

$ #12256

Tests

Create a new chat with any user and make sure the visuals match the design.
Create a new group chat with 2 users and make sure the visuals match the design (this should not be different except for having more than one user icon).
Create a new group chat with 6-8 users and make sure the visuals match the design (this should not be different except for having more than one user icon).
Create a new room and make sure the visuals match the design (this should not be different other than the text changes).

Verify that no errors appear in the JS console

Offline tests

Create a new chat with any user and make sure the visuals match the design.
Create a new group chat with 2 users and make sure the visuals match the design (this should not be different except for having more than one user icon).
Create a new group chat with 6-8 users and make sure the visuals match the design (this should not be different except for having more than one user icon).
Create a new room and make sure the visuals match the design (this should not be different other than the text changes).

QA Steps

Create a new chat with any user and make sure the visuals match the design.
Create a new group chat with 2 users and make sure the visuals match the design (this should not be different except for having more than one user icon).
Create a new group chat with 6-8 users and make sure the visuals match the design (this should not be different except for having more than one user icon).
Create a new room and make sure the visuals match the design (this should not be different other than the text changes).

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

melvin-bot · 2022-12-19T23:56:10Z

@grgia @parasharrajat One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

shawnborton · 2022-12-20T03:01:44Z

Nice! A couple of minor comments:

For the empty state area, can we give the text area a padding of 40px horizontal, 20px top and 32px bottom? This way it will feel slightly inset from the content, and make it feel a bit more airy.

Distance between the avatar and the headline below should be 12px

Can we have the text area overlap the faded BG image some more? Almost as if the text area had something like top: -60px so that it overlaps by 60px.

dangrous · 2022-12-20T20:54:08Z

Updated based on your notes @shawnborton! Just to note, I think there's a bit of extra padding when it's a FULLY new chat, vs. one at the top of an existing chat. This is what the new designs look like with messages below them, which I think is 32px (so matching the new mock). Looks like it's more like 40 when there aren't other messages, which I think is padding for the compose bar maybe?

I think we should be good to go once we confirm the copy! As soon as we get that I'll take it off of WIP.

shawnborton · 2022-12-21T01:50:16Z

Ah got it, thanks for sharing. Well, maybe we should just standardize on padding: 40px for all sides (vertical, horizontal) and all scenarios (totally new chat, or existing chat). I think that will make things easier for us, thoughts?

dangrous · 2022-12-21T17:41:30Z

So the trick with the bottom padding is that this "action item" - i.e. the welcome message - has its own padding, and then the full list of items (including any chat messages) also has ITS own padding. When there are other messages, we only see the padding of this welcome message (as the list padding is below the messages). When there aren't we see both together, which is why it's bigger when there aren't messages. I can't see an easy way to make it the same in both situations... Basically it'll always be ~8px more (it's actually more, but the chat messages have their own padding so that's what it looks like). Should we keep it as is in this PR for now? The difference isn't huge.

In other news, translations and copy are ready to go so this is good to test/review!

shawnborton · 2022-12-21T17:57:19Z

Cool, I think it's fine to keep as-is then, thanks for explaining!

shawnborton · 2022-12-21T17:58:20Z

For the mobile sizes, I wonder if we can make the background a little bit smaller so we squeeze in some more detail from the illustration? Something more like this:

dangrous · 2022-12-21T21:55:09Z

Updated based on @shawnborton's feedback (screenshots updated as well). Man, every time I think "this will be an easy fix" the image conspires to make things more challenging. This is messy but still works, I think. As always, clean up ideas are appreciated.

dangrous · 2023-01-30T16:56:12Z

Updated with the bug fixed about pointer events! I don't think we should change the accessibilityLabel in this PR because it affects other things, but do agree that it should be changed. We can make another issue to investigate things overall, once this is pushed.

shawnborton · 2023-01-30T16:57:27Z

Awesome, thanks @dangrous - hopefully we can get this merged soon!

parasharrajat · 2023-01-30T17:03:19Z

Testing...

parasharrajat · 2023-01-30T17:24:14Z

I know this is not changed in this PR but need confirmation. @shawnborton Is it fine that clicking on the square area around the avatar opens the details modal? I guess we are not applying the same border radius to the click handler as the avatar.

screen-2023-01-30_22.52.13.mp4

parasharrajat · 2023-01-30T17:36:14Z

Should there be a gap between the two lines like the normal chat for room chat as well based on the following image?

Group Chat/Single Chat/Normal Chat

Room Chat

shawnborton · 2023-01-30T18:09:52Z

Yes - I think both the click area and the gap between paragraphs is fine.

…

On Mon, Jan 30, 2023 at 6:36 PM Rajat Parashar ***@***.***> wrote: Should there be a gap between the two lines like the normal chat for room chat as well based on the following image? [image: image] <https://user-images.githubusercontent.com/24370807/215551406-d46fdf2f-1d3f-43fc-8b1d-6700cdac3e32.png> Group Chat/Single Chat/Normal Chat [image: Screenshot 2023-01-30 23:05:02] <https://user-images.githubusercontent.com/24370807/215551569-fe00a2ae-36d6-4f60-9b72-ca7a6cf7c49f.png> Room Chat [image: Screenshot 2023-01-30 23:06:00] <https://user-images.githubusercontent.com/24370807/215551736-2f4693f0-6c9e-4ef9-83e1-a9c94c303ae6.png> — Reply to this email directly, view it on GitHub <#13647 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARWH5WGPF3MLGUOB6WA2VLWU73ZTANCNFSM6AAAAAATAIECTI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

parasharrajat · 2023-01-30T19:07:09Z

Screenshots

🔲 iOS / native

screen-2023-01-31_00.30.12.mp4

🔲 iOS / Safari

screen-2023-01-31_00.35.43.mp4

🔲 MacOS / Desktop

screen-2023-01-31_00.28.19.mp4

🔲 MacOS / Chrome

screen-2023-01-31_00.33.38.mp4

🔲 Android / Chrome

screen-2023-01-31_00.49.10.mp4

🔲 Android / native

screen-2023-01-31_01.01.17.mp4

shawnborton · 2023-01-30T19:29:18Z

Looks great! Merge is all you @grgia

parasharrajat

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android / native
- Android / Chrome
- iOS / native
- iOS / Safari
- MacOS / Chrome / Safari
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

cc: @grgia

🎀 👀 🎀 C+ reviewed

parasharrajat · 2023-01-30T19:35:46Z

Good collab on this issue. Really happy with the thorough review and changes.

shawnborton · 2023-01-31T07:04:23Z

Awesome. @grgia all you for the merge!

JmillsExpensify · 2023-01-31T19:04:23Z

Let's click the button on this one! It's a great improvement worth getting in the hands of users.

grgia

Looks great!

grgia · 2023-01-31T19:47:19Z

Great job on this @dangrous !

OSBotify · 2023-01-31T19:52:29Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

dangrous · 2023-01-31T20:38:18Z

Amazing, thanks all for pushing this through! It's been a long road haha but it looks great.

OSBotify · 2023-02-02T00:45:09Z

🚀 Deployed to staging by https://github.com/grgia in version: 1.2.64-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-02-04T00:18:20Z

🚀 Deployed to production by https://github.com/thienlnam in version: 1.2.64-7 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

OSBotify · 2023-02-04T01:56:21Z

🚀 Deployed to production by https://github.com/thienlnam in version: 1.2.64-7 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-02-04T02:02:28Z

🚀 Deployed to production by https://github.com/thienlnam in version: 1.2.64-7 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

dangrous added 4 commits December 8, 2022 15:55

initial text formatting

17f4d94

Merge branch 'main' into dangrous-emptystatedesign

a739303

add svg

7fb162d

allow for review

3d31260

dangrous self-assigned this Dec 15, 2022

dangrous added 4 commits December 19, 2022 12:02

add background image to empty state

e16af81

make text styling work

882a866

clean code, fix unrelated spelling error

2137936

revert Podfile

1ce6051

dangrous marked this pull request as ready for review December 19, 2022 23:56

dangrous requested a review from a team as a code owner December 19, 2022 23:56

melvin-bot bot requested review from grgia and parasharrajat and removed request for a team December 19, 2022 23:56

shawnborton self-requested a review December 20, 2022 03:01

dangrous added 2 commits December 20, 2022 15:41

address review and lint

cc8a117

fix padding

284b025

dangrous added 2 commits December 21, 2022 12:29

update spanish translations

61cb1d5

update english

86095e1

dangrous changed the title ~~[WIP] Empty State Design~~ Empty State Design Dec 21, 2022

merge main

0383b99

update image sizing

17e6fa0

shawnborton approved these changes Jan 30, 2023

View reviewed changes

parasharrajat approved these changes Jan 30, 2023

View reviewed changes

shawnborton mentioned this pull request Jan 31, 2023

[$1000] Workspace - The welcome message in Spanish is very close to the edge of the page #14564

Closed

2 tasks

grgia approved these changes Jan 31, 2023

View reviewed changes

grgia merged commit 07462cf into main Jan 31, 2023

grgia deleted the dangrous-emptystatedesign branch January 31, 2023 19:47

thienlnam mentioned this pull request Feb 2, 2023

Deploy Checklist: New Expensify 2023-02-02 #14771

Closed

30 tasks

aimane-chnaif mentioned this pull request Feb 26, 2023

Use Image instead of ImageBackground #15391

Merged

54 tasks

parasharrajat mentioned this pull request Apr 6, 2023

[HOLD for payment 2023-04-05][$1000] Translate all accessibility features and update tests accordingly #14763

Closed

6 tasks

Milos213 mentioned this pull request Apr 7, 2023

[$1000] Inconsistent padding inbetween lines below Say Hello! for DM and workspace room chats #17094

Closed

6 tasks

abdulrahuman5196 mentioned this pull request Jul 31, 2023

[HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-20] [$1000] Web - Background image on request money page looks clipped on high resolution screen #23477

Closed

6 tasks

rayane-djouah mentioned this pull request Feb 9, 2024

[HOLD for payment 2024-06-06] [$500] Empty state image has too much overlap with message in attachment thread #36166

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Empty State Design #13647

Empty State Design #13647

dangrous commented Dec 15, 2022 •

edited

Loading

melvin-bot bot commented Dec 19, 2022

shawnborton commented Dec 20, 2022

dangrous commented Dec 20, 2022 •

edited

Loading

shawnborton commented Dec 21, 2022

dangrous commented Dec 21, 2022

shawnborton commented Dec 21, 2022

shawnborton commented Dec 21, 2022

dangrous commented Dec 21, 2022

dangrous commented Jan 30, 2023

shawnborton commented Jan 30, 2023

parasharrajat commented Jan 30, 2023

parasharrajat commented Jan 30, 2023

parasharrajat commented Jan 30, 2023

shawnborton commented Jan 30, 2023 via email

parasharrajat commented Jan 30, 2023 •

edited

Loading

shawnborton commented Jan 30, 2023

parasharrajat left a comment

parasharrajat commented Jan 30, 2023 •

edited

Loading

shawnborton commented Jan 31, 2023

JmillsExpensify commented Jan 31, 2023

grgia left a comment

grgia commented Jan 31, 2023

OSBotify commented Jan 31, 2023

dangrous commented Jan 31, 2023

OSBotify commented Feb 2, 2023

OSBotify commented Feb 4, 2023

OSBotify commented Feb 4, 2023

OSBotify commented Feb 4, 2023

Empty State Design #13647

Empty State Design #13647

Conversation

dangrous commented Dec 15, 2022 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Dec 19, 2022

shawnborton commented Dec 20, 2022

dangrous commented Dec 20, 2022 • edited Loading

shawnborton commented Dec 21, 2022

dangrous commented Dec 21, 2022

shawnborton commented Dec 21, 2022

shawnborton commented Dec 21, 2022

dangrous commented Dec 21, 2022

dangrous commented Jan 30, 2023

shawnborton commented Jan 30, 2023

parasharrajat commented Jan 30, 2023

parasharrajat commented Jan 30, 2023

parasharrajat commented Jan 30, 2023

shawnborton commented Jan 30, 2023 via email

parasharrajat commented Jan 30, 2023 • edited Loading

Screenshots

🔲 iOS / native

🔲 iOS / Safari

🔲 MacOS / Desktop

🔲 MacOS / Chrome

🔲 Android / Chrome

🔲 Android / native

shawnborton commented Jan 30, 2023

parasharrajat left a comment

Choose a reason for hiding this comment

Reviewer Checklist

parasharrajat commented Jan 30, 2023 • edited Loading

shawnborton commented Jan 31, 2023

JmillsExpensify commented Jan 31, 2023

grgia left a comment

Choose a reason for hiding this comment

grgia commented Jan 31, 2023

OSBotify commented Jan 31, 2023

dangrous commented Jan 31, 2023

OSBotify commented Feb 2, 2023

OSBotify commented Feb 4, 2023

OSBotify commented Feb 4, 2023

OSBotify commented Feb 4, 2023

dangrous commented Dec 15, 2022 •

edited

Loading

dangrous commented Dec 20, 2022 •

edited

Loading

parasharrajat commented Jan 30, 2023 •

edited

Loading

parasharrajat commented Jan 30, 2023 •

edited

Loading