adjust horizontal padding in empty workspace view

[situchan]

Details

• add 40px horizontal padding to wrapper
• set text align center to title
• remove 70% width in subtitle

Fixed Issues

$ #14564
PROPOSAL: #14564 (comment)

Tests

1. Login with any account
2. If language is English, switch to Spanish in Settings -> Preferences
3. Go to Settings -> Workspaces
4. Delete all workspaces if they present
5. Verify that title is centered and welcome message is NOT very close to the edge of the page

• Verify that no errors appear in the JS console

Offline tests

1. Login with any account
2. If language is English, switch to Spanish in Settings -> Preferences
3. Go to Settings -> Workspaces
4. Delete all workspaces if they present
5. Disable network
6. Verify that title is centered and welcome message is NOT very close to the edge of the page

QA Steps

1. Login with any account
2. If language is English, switch to Spanish in Settings -> Preferences
3. Go to Settings -> Workspaces
4. Delete all workspaces if they present
5. Verify that title is centered and welcome message is NOT very close to the edge of the page

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover 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 tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (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
    • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • 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 followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• 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
• I verified that if a function's arguments changed that all usages have also been updated correctly
• 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 author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

[melvin-bot]

@francoisl @mananjadhav 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]

[mananjadhav]

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.

Screenshots/Videos

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

---

Thanks @situchan for the quick PR. It tests well. It also impacts the some other pages where we have offline blocking behavior like Plaid, Reimbursement Account steps. I've tested those as well. @francoisl All yours.

[OSBotify]

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

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries

Name	Duration
App start TTI	670.307 ms → 698.555 ms (+28.248 ms, +4.2%)
App start runJsBundle	183.406 ms → 188.344 ms (+4.938 ms, +2.7%)
App start nativeLaunch	20.065 ms → 20.129 ms (+0.065 ms, ±0.0%)
App start regularAppStart	0.014 ms → 0.015 ms (+0.001 ms, +5.3%)
Open Search Page TTI	612.560 ms → 609.623 ms (-2.937 ms, ±0.0%)

Show details

Name	Duration
App start TTI	Baseline Mean: 670.307 ms Stdev: 38.306 ms (5.7%) Runs: 605.8068960001692 606.8483220003545 626.7471439996734 628.7472230000421 631.1900899996981 636.5000820001587 638.1667729998007 639.1732559995726 639.9279209999368 640.1444030003622 647.800785000436 648.3191550001502 653.0263430001214 657.8457159996033 664.3745699999854 667.4662760002539 669.2270870003849 672.8969440003857 676.4041330004111 676.5328010004014 678.298259999603 683.2818919997662 687.1690469998866 689.5101509997621 689.8831850001588 701.6869090003893 705.463231000118 723.7945710001513 726.7372770002112 733.2410580003634 739.8643270004541 763.7525810003281 Current Mean: 698.555 ms Stdev: 29.610 ms (4.2%) Runs: 650.0706089995801 652.5166980000213 655.486375999637 664.1167580001056 668.4217969998717 668.482769000344 670.7829299997538 671.683473999612 680.375400999561 680.6494779996574 682.4028890002519 683.5155020002276 684.522135999985 690.6491590002552 691.1845019999892 693.0873490003869 694.5318050002679 700.9764170004055 704.4356089998037 705.638256999664 705.8247720003128 713.610040999949 716.8053850000724 719.4321250002831 720.7176240002736 722.6992969997227 723.0020430004224 723.4193719998002 745.7270609997213 751.1998070003465 754.8609119998291 762.9373570000753
App start runJsBundle	Baseline Mean: 183.406 ms Stdev: 20.065 ms (10.9%) Runs: 154 157 159 160 161 163 168 169 170 170 171 173 174 175 178 179 180 181 182 184 186 187 190 193 199 204 204 212 215 219 224 228 Current Mean: 188.344 ms Stdev: 19.199 ms (10.2%) Runs: 156 159 164 166 166 168 170 170 172 175 175 180 180 181 185 186 188 192 194 194 194 194 199 204 205 206 207 213 215 220 223 226
App start nativeLaunch	Baseline Mean: 20.065 ms Stdev: 2.501 ms (12.5%) Runs: 17 17 18 18 18 18 18 18 18 18 18 19 19 19 19 19 20 20 20 20 20 21 21 21 21 22 24 25 25 25 26 Current Mean: 20.129 ms Stdev: 2.196 ms (10.9%) Runs: 18 18 18 18 18 18 18 18 18 19 19 19 19 19 19 19 20 20 20 20 21 21 21 21 22 22 23 23 24 25 26
App start regularAppStart	Baseline Mean: 0.014 ms Stdev: 0.001 ms (6.3%) Runs: 0.012654999271035194 0.012736000120639801 0.012898999266326427 0.013102000579237938 0.013143000192940235 0.013143000192940235 0.013183999806642532 0.0133050000295043 0.013387000188231468 0.0134680001065135 0.013508999720215797 0.01358999963849783 0.013630999252200127 0.013712000101804733 0.013833999633789062 0.013833999633789062 0.0138349998742342 0.013875000178813934 0.013915999792516232 0.014282000251114368 0.014322000555694103 0.014363999478518963 0.01444500032812357 0.014770000241696835 0.014771000482141972 0.014933999627828598 0.014974000863730907 0.015177000313997269 0.01521800085902214 0.01582799945026636 0.016235999763011932 Current Mean: 0.015 ms Stdev: 0.001 ms (7.0%) Runs: 0.013062000274658203 0.013223999179899693 0.013427999801933765 0.013590000569820404 0.013711999170482159 0.013753999955952168 0.013833999633789062 0.013875000178813934 0.013915999792516232 0.014159999787807465 0.014201000332832336 0.014322999864816666 0.014322999864816666 0.0143630001693964 0.014405000023543835 0.014526999555528164 0.014566999860107899 0.014689000323414803 0.014851999469101429 0.014973999932408333 0.015096000395715237 0.015135999768972397 0.0152580002322793 0.015259000472724438 0.015298999845981598 0.015584000386297703 0.01566499937325716 0.015868999995291233 0.016439000144600868 0.016682999208569527 0.016886000521481037 0.017048999667167664
Open Search Page TTI	Baseline Mean: 612.560 ms Stdev: 22.773 ms (3.7%) Runs: 574.1941330004483 583.0951340002939 585.1313889995217 585.5152590004727 587.3769130008295 588.1084799999371 590.1034760000184 592.0393060008064 595.4394530002028 597.7481699995697 598.8065600004047 599.1646729996428 602.6495769992471 606.3547769999132 609.6374929994345 610.7696939995512 612.7349040005356 615.0497230002657 616.4982510004193 616.9455159995705 618.5161540005356 620.6170250000432 622.8245040001348 622.8890390004963 631.4617109997198 634.4372160006315 634.7362069999799 637.3328459998593 644.0554200001061 644.8872890006751 645.8904220005497 676.915974999778 Current Mean: 609.623 ms Stdev: 21.466 ms (3.5%) Runs: 574.8455809997395 581.0510669993237 583.3221040004864 585.5912690004334 585.9536129999906 588.9604500001296 592.2823489997536 592.750121999532 593.1708580004051 593.6898599993438 594.4171959999949 596.9587809992954 599.025675999932 603.0000820001587 607.1534010004252 607.5960290003568 610.81018100027 610.8118489999324 611.3936769999564 611.8038739999756 615.2810060000047 620.1082359999418 620.7121580000967 624.4025880005211 624.62084900029 625.193806999363 626.2762860003859 630.831664999947 635.7943119993433 637.9326579999179 648.4104010006413 673.7768149999902

[OSBotify]

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

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

[OSBotify]

🚀 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]

🚀 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]

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

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