Fixing back arrow alignment/display logic [FTX Widget]

[ryanml]

Fixes brave/brave-browser#15941
Fixes brave/brave-browser#15930

Initial state:

Opt-in state:

After viewing markets (corrected alignment):

After viewing markets and switching to another widget (no persistence):

cc: @simonhong

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

Defined in issue

[ryanml]

It seems the only place this shared style is used is within the FTX widget. If this were to be a general style for the backarrow as it appears in only the header across widgets, styles may look something like this:

width: 20px;
cursor: pointer;
position: absolute;
right: 40px;

Given that this is also used in the asset detail view, to cover that use case as well, it may be best to nix all css rules besides width and cursor, and just put the burden of positioning on containers fitting the use case

[simonhong]

IMO, back arrow could be visible when current view is markets and in not connected state.
and I think back arrow would be helpful also when asset is selected like below.
With this user can go back to opt-in view easily. WDYT? @ryanml @petemill

    const shouldShowBackArrow = showContent &&
      this.props.ftx.currentView === ViewType.Markets &&
      !this.props.ftx.isConnected

[ryanml]

@simonhong, makes sense to me! I've updated this with:

--- a/components/brave_new_tab_ui/widgets/ftx/components/index.tsx
+++ b/components/brave_new_tab_ui/widgets/ftx/components/index.tsx
@@ -119,10 +119,9 @@ class FTX extends React.PureComponent<Props, State> {
   }
 
   renderTitle () {
-    const selectedAsset = this.props.ftx.assetDetail?.currencyName
     const { showContent, widgetTitle } = this.props
     // Only show back arrow to go back to opt-in view
-    const shouldShowBackArrow = showContent && !selectedAsset &&
+    const shouldShowBackArrow = showContent &&
       this.props.ftx.currentView !== ViewType.OptIn

Though I omitted the check for !this.props.ftx.isConnected, as I believe we still want it shown in the connected state as well. Let me know if that isn't the case, thanks!

[ryanml]

Ah, or it could be that we don't want it to show when connected because at that point, the user should be disconnecting the widget as opposed to backtracking to pre-optin via the back arrow

[ryanml]

I've re-updated this with your suggested snippet 👍

[simonhong]

++ 👍

[simonhong]

CI run from #9054 has all green.

[srirambv]

Verification passed on

Brave	1.27.59 Chromium: 91.0.4472.101 (Official Build) nightly (x86_64)
Revision	af52a90bf87030dd1523486a1cd3ae25c5d76c9b-refs/branch-heads/4472@{#1462}
OS	macOS Version 10.15.7 (Build 19H114)

brave/brave-browser#15941

• Verified back button is not shown when widget is backgrounded

brave/brave-browser#15930

• Verified back button is properly aligned compared to other widgets

FTX.NTP.mov