fix: Extra padding between bank account selector and ToS checkbox

[ishpaul777]

Details

This PR remove unnecessary margin bottom from bank account selector #30588.

Fixed Issues

$ #30588
PROPOSAL: #30588 (comment)

Tests

• Verify that no errors appear in the JS console

1. Go to Settings > Workspaces > any workspace > Bank account > Connect with Plaid
2. Proceed with adding Chase bank account
3. Select a bank account in the selection page
4. Verfy there no extra gap(margin bottom to BA Picker) beween BA Picker and ToS checkbox.

Offline tests

QA Steps

• Verify that no errors appear in the JS console

1. Go to Settings > Workspaces > any workspace > Bank account > Connect with Plaid
2. Proceed with adding Chase bank account
3. Select a bank account in the selection page
4. Verfy there no extra gap(margin bottom to BA Picker) beween BA Picker and ToS checkbox.

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: mWeb Chrome
  • iOS: Native
  • iOS: mWeb 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 the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • 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 grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is 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
  • If we are not using the full Onyx data that we loaded, I've added the proper selector in order to ensure the component only re-renders when the data it is using changes
  • 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 code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• 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 the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• 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.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
• I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

Screen.Recording.2023-11-01.at.1.45.20.AM.mov

Android: mWeb Chrome

Screen.Recording.2023-11-01.at.1.50.40.AM.mov

iOS: Native

Screen.Recording.2023-11-01.at.2.07.06.AM.mov

iOS: mWeb Safari

Screen.Recording.2023-11-01.at.2.20.39.AM.mov

MacOS: Chrome / Safari

Screen.Recording.2023-11-01.at.1.36.17.AM.mov

MacOS: Desktop

Screen.Recording.2023-11-02.at.3.05.17.PM.mov

[melvin-bot]

@narefyev91 Please 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]

[ishpaul777]

@narefyev91 Can you provide feedback when you get the chance please?

[narefyev91]

@narefyev91 Can you provide feedback when you get the chance please?

Already working on it

[narefyev91]

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 the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • 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 grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is 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 code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• 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.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

web.mp4

Mobile Web - Chrome

android-web.mp4

Mobile Web - Safari

ios-web.mov

Desktop

desktop.mov

iOS

ios.mov

Android

[narefyev91]

LGTM!
🎀 👀 🎀 C+ reviewed

[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

Name	Duration
App start TTI	1079.720 ms → 1244.702 ms (+164.982 ms, +15.3%) 🔴
App start runJsBundle	743.356 ms → 864.847 ms (+121.492 ms, +16.3%) 🔴

Show details

Name	Duration
App start TTI	Baseline Mean: 1079.720 ms Stdev: 31.113 ms (2.9%) Runs: 1022.2315889999736 1025.382069000043 1028.0120989999268 1031.6124420000706 1042.210315000033 1045.9991460000165 1046.326503999997 1047.7520220000297 1054.7159490000922 1054.7259650002234 1055.5948169999756 1056.416340999771 1057.9008800000884 1059.4514369999524 1059.917650999967 1060.0787349999882 1060.1464050000068 1061.2084369999357 1061.4670490000863 1063.2795069999993 1063.4207359999418 1064.006481999997 1064.1840809998102 1066.7903840001673 1067.2805399999488 1069.451817000052 1070.917264000047 1071.3171919998713 1071.3255269997753 1071.6529349999037 1071.7194689998869 1074.4623949998058 1076.8973119999282 1081.0638379999436 1081.142827999778 1081.5081309999805 1084.4003109999467 1085.311218000017 1086.2389060000423 1089.3480380000547 1090.8861960000359 1092.7807149998844 1093.4820290000644 1095.1135929999873 1106.9617779999971 1106.9796889999416 1108.2790729999542 1108.597194999922 1111.3351230002008 1111.6748740000185 1112.7576350001618 1118.2267199999187 1119.7408779999241 1120.5245699998923 1123.7826539999805 1132.0211660000496 1133.6036779999267 1153.9859350000042 1175.8592320000753 Current Mean: 1244.702 ms Stdev: 39.318 ms (3.2%) Runs: 1163.0299929999746 1182.9901250000112 1185.6123790000565 1193.8469970000442 1194.579982999945 1200.0895519999322 1205.5260870000347 1208.5038519999944 1208.9347439999692 1209.3168329999316 1214.0240470001008 1214.063936999999 1214.1092189999763 1214.1134639999364 1218.2596700000577 1218.3497570001055 1218.4900720000733 1219.0725489999168 1219.1171039999463 1220.152405000059 1222.6344469999894 1222.8649679999799 1223.0938009999227 1226.0060550000053 1227.416314000031 1229.5314539999235 1230.1114000000525 1230.6211920001078 1236.4152889999095 1236.8171089999378 1238.0848350001033 1240.1084320000373 1240.4964030000847 1243.4477860000916 1245.9337800000794 1248.0070019999985 1248.3131279998925 1250.2782910000533 1254.2479240000248 1254.9973319999408 1258.3960669999942 1259.8912820001133 1265.245181000093 1269.5516329999082 1272.360924999928 1273.903389000101 1279.3349699999671 1282.1272839999292 1282.5475979999173 1295.324687999906 1302.904271000065 1304.2113920000847 1305.2195890001021 1308.4875749999192 1312.397965000011 1315.4484649999067 1322.9803450000472 1327.277907999931 1328.203625000082
App start runJsBundle	Baseline Mean: 743.356 ms Stdev: 25.203 ms (3.4%) Runs: 704 707 708 709 711 714 716 716 716 719 722 723 723 724 724 724 725 725 725 728 730 730 734 734 734 735 737 737 738 739 740 740 741 741 742 744 745 748 748 752 753 754 755 756 762 766 767 769 770 770 771 771 776 786 787 790 793 794 816 Current Mean: 864.847 ms Stdev: 29.292 ms (3.4%) Runs: 809 821 821 824 826 829 833 835 836 836 837 839 841 841 845 846 847 848 849 850 850 850 851 852 854 855 855 856 857 857 861 861 863 864 867 869 870 875 876 876 878 879 880 881 884 884 885 892 894 895 901 902 905 905 912 916 932 932 937

Meaningless Changes To Duration

Show entries

Name	Duration
App start nativeLaunch	21.196 ms → 22.911 ms (+1.714 ms, +8.1%)
App start regularAppStart	0.017 ms → 0.019 ms (+0.002 ms, +9.4%)
Open Search Page TTI	713.863 ms → 701.823 ms (-12.040 ms, -1.7%)

Show details

Name	Duration
App start nativeLaunch	Baseline Mean: 21.196 ms Stdev: 1.481 ms (7.0%) Runs: 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 20 20 20 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 22 22 22 22 22 22 22 22 22 23 23 23 23 24 24 25 25 25 Current Mean: 22.911 ms Stdev: 1.503 ms (6.6%) Runs: 20 21 21 21 21 21 21 21 21 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 23 23 23 23 23 23 23 23 23 23 23 23 24 24 24 24 24 24 24 24 24 24 25 25 25 25 26 26 26 27
App start regularAppStart	Baseline Mean: 0.017 ms Stdev: 0.001 ms (5.8%) Runs: 0.015422000084072351 0.015503000002354383 0.015706999925896525 0.015868999995291233 0.015950999688357115 0.01599099999293685 0.016112999990582466 0.0163569999858737 0.016357999993488193 0.01639799983240664 0.016438999911770225 0.016439000144600868 0.016439000144600868 0.016600999981164932 0.01688600005581975 0.01688600005581975 0.0168869998306036 0.016927000135183334 0.01696799974888563 0.017008000053465366 0.017048999899998307 0.017050000373274088 0.017089999979361892 0.017130999825894833 0.017171000130474567 0.017171000130474567 0.017171000130474567 0.017171000130474567 0.01721199997700751 0.01725299982354045 0.017253000056371093 0.017253000056371093 0.017293000128120184 0.017333999974653125 0.017333999974653125 0.017333999974653125 0.017578000202775 0.01757899997755885 0.01774100004695356 0.017782000359147787 0.017863000044599175 0.018065999960526824 0.018188999965786934 0.01835100003518164 0.018352000042796135 0.018391999881714582 0.018473000265657902 0.018757999874651432 0.018758000107482076 0.018798999954015017 0.018961999798193574 0.018962000031024218 0.019328000023961067 0.020060000009834766 Current Mean: 0.019 ms Stdev: 0.001 ms (6.3%) Runs: 0.017130000051110983 0.017131000058725476 0.01721199997700751 0.017619000049307942 0.0177819998934865 0.0177819998934865 0.017822000198066235 0.017823000205680728 0.017863000044599175 0.017863000044599175 0.017903000116348267 0.017943999962881207 0.01798499980941415 0.017986000049859285 0.018025999888777733 0.018065999960526824 0.01818799995817244 0.018189000198617578 0.018229000037536025 0.01827000011689961 0.0183100001886487 0.018391999881714582 0.018392000114545226 0.018472999799996614 0.018473000032827258 0.0185139998793602 0.018596000038087368 0.018637000117450953 0.01871700002811849 0.018718000035732985 0.018757999874651432 0.018757999874651432 0.018758000107482076 0.01879900018684566 0.01887999987229705 0.018921000184491277 0.01904299994930625 0.01908300002105534 0.01908399979583919 0.019164999946951866 0.019164999946951866 0.019328000023961067 0.019491000100970268 0.01977499993517995 0.019816000014543533 0.019937999779358506 0.02010100008919835 0.02026399993337691 0.020466999849304557 0.02046799985691905 0.02059000008739531 0.020751999923959374 0.020751999923959374 0.021280999993905425 0.021646999986842275 0.02176899998448789 0.022379999980330467
Open Search Page TTI	Baseline Mean: 713.863 ms Stdev: 45.350 ms (6.4%) Runs: 610.9984949999489 650.7667639995925 657.774862000253 658.3510340000503 663.6533210002817 664.7005620002747 665.4353029998019 667.9509280002676 669.1503500002436 669.3050539996475 669.4732260000892 670.4381099999882 673.7595620001666 677.3413090002723 677.5240890001878 681.0404869997874 682.5381680000573 682.8639739998616 684.1265460001305 684.1540530002676 684.5465910001658 687.5514330002479 689.8334150002338 690.5137129998766 690.679525999818 690.8511560000479 693.1114509999752 693.66040099971 701.8662930000573 701.8986000004224 706.5972909997217 708.2411299999803 708.3537609996274 710.9657800002024 713.1417240002193 716.0486659999005 718.2615970000625 720.1816000002436 724.8866779999807 727.128173999954 730.909953000024 732.4646000000648 737.4707439998165 737.8763840002939 746.2587490002625 746.4329019999132 746.6514900000766 749.4662270001136 757.1998700001277 758.3436280000024 769.3617759998888 770.0091149997897 772.0568039999343 773.2834479999729 777.2110599996522 784.7821859996766 786.7636319999583 790.0488690002821 808.9232999999076 810.1208499995992 820.3488769996911 Current Mean: 701.823 ms Stdev: 41.156 ms (5.9%) Runs: 628.1054289997555 635.8145349998958 639.7620450002141 643.1675619999878 646.1298019997776 648.8526200000197 648.8905850001611 656.5784919997677 657.4585770000704 659.1400150000118 664.5488690002821 667.2231850000098 667.7179769999348 669.4940190003254 669.6620689998381 670.058796999976 673.975424000062 674.0133470003493 675.2328289998695 675.7380379997194 676.6949470001273 679.969360999763 680.6729739997536 683.1987709999084 686.758911000099 687.2972820000723 687.6793619999662 688.8675540001132 694.8612880003639 695.4865729999729 695.6510830000043 696.2216799999587 697.5767420004122 704.0546879996546 704.4652909999713 706.710449999664 706.7746999999508 707.4049489996396 710.3470459999517 710.4454760001972 717.5596929998137 723.1922200000845 724.1728110001422 726.2743329997174 726.853800999932 731.6170249995776 734.7676189998165 735.6904309997335 743.0012210002169 743.746907999739 744.0645349998958 748.7048340002075 749.9827479999512 757.1813959996216 757.5106609999202 763.18880299991 765.2890630001202 772.1896170000546 773.5437830002047 790.9008789998479 809.0675050001591

[github-actions]

@Expensify/mobile-deployers 📣 Please look into this performance regression as it's a deploy blocker.

[OSBotify]

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

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

[OSBotify]

🚀 Deployed to production by https://github.com/puneetlath in version: 1.3.96-15 🚀

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

[OSBotify]

🚀 Deployed to production by https://github.com/puneetlath in version: 1.3.97-7 🚀

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