Deemphasise additional bond when one already exists

[barrytra]

This PR fixes #756
Size of the button has been reduced to look like this:

Earlier it also had a message displayed as : "If more than one fidelity bond exists, only the <0>the most valuable one</0> will be used." I don't get how to use this if we reduce the button size. So for now I have just commented this portion. One Idea is simply we can add this info in settings which will be tackled in next PR. Would love to hear any other suggestion as well.

Secondly the dropdown now looks a bit weird. like this:

But This eventually should not be a problem as we would have a modal instead of dropdown.

[theborakompanioni]

Instead of positioning with margins, what do think about using flexbox?
e.g. you could use d-flex justify-content-end on the parent element to position the button to the "right".

[theborakompanioni]

On first glance, it seems the design has slightly changed, since the container css class moved away from here.

Before

After

Dropdown content is not within the surrounding area border anymore (no FB present).

[barrytra]

yes the code changes will make this issue. I kinda knew it. But If I try to fix then <rb.collapse> section will have to be repeated twice for both the cases ( active bond exists and no active bond). This will just increase the code length.
One solution is that eventually it will be a modal so this issue shouldn't be there after we do that. So we can possibly fix that issue(modal instead of dropdown for the form) first and then there will be nothing to talk about this.

[theborakompanioni]

I think it can be achieved without (or with less) new css classes:

<div className="d-flex justify-content-end">
  <rb.Button size="sm" variant="outline-dark" onClick={() => setIsExpanded(it => !it)}>
    <div className="d-flex justify-content-center align-items-center">
      {t('earn.fidelity_bond.title_fidelity_bond_exists')}
      <Sprite className="ms-1" symbol={isExpanded ? 'caret-up' : 'plus'} width="16" height="16" />
    </div>
  </rb.Button>
</div>

What do you think?

[theborakompanioni]

Do you have an idea where we can display the message? Maybe after the users actively clicks the button?

[barrytra]

we can show this message at the top of the form when user clicks the button, only in the case when active bonds exist.

[barrytra]

Fixes in new commits

• when there doesn't exist any bond earlier UI looks like this:
  
• When FB already exists, UI is like:
  
• When FB already exists, the message If more than one fidelity bond exists, only the <0>the most valuable one</0> will be used. is displayed like this:
  

Suggestions needed

1. The plus symbol in Configure additional bond button (when bond already exists) doesn't look very attractive to me. We could possibly remove that and IMO it won't change any significance.
2. Please look up on CSS part. i have tried to keep it minimal. Still not sure if more simplification is possible.

please have a look @theborakompanioni

[theborakompanioni]

From our conversation:

• The button should be centered
• The button should be a real button element
• Icon should be in front of the label with a little bit of spacing (e.g. like the "Show orderbook" button)
• Button should be slightly smaller (use <rb.Button size="sm" ... />)

[barrytra]

Suggested changes have been made..

Pls have a review @theborakompanioni

[theborakompanioni]

Pls have a review @theborakompanioni

Looks nice and exactly as discussed. 🚀

Can you check whether some added css classes are unused and can be removed?

Also, what do you think.. can we bring the existing bond help text back somehow?

<Trans i18nKey="earn.fidelity_bond.subtitle_fidelity_bond_exists">
              <a
                onClick={(e) => e.stopPropagation()}
                rel="noopener noreferrer"
                href="https://github.com/JoinMarket-Org/joinmarket-clientserver/blob/master/docs/fidelity-bonds.md#what-amount-of-bitcoins-to-lock-up-and-for-how-long"
              >
                {/* i18n placeholder */}
              </a>
            </Trans>

[barrytra]

Also, what do you think.. can we bring the existing bond help text back somehow?

<Trans i18nKey="earn.fidelity_bond.subtitle_fidelity_bond_exists">
              <a
                onClick={(e) => e.stopPropagation()}
                rel="noopener noreferrer"
                href="https://github.com/JoinMarket-Org/joinmarket-clientserver/blob/master/docs/fidelity-bonds.md#what-amount-of-bitcoins-to-lock-up-and-for-how-long"
              >
                {/* i18n placeholder */}
              </a>
            </Trans>

ya my fault.. It somehow disappeared from my code. Added it back now.. and css file has also been omitted.

[theborakompanioni]

Also, what do you think.. can we bring the existing bond help text back somehow?

<Trans i18nKey="earn.fidelity_bond.subtitle_fidelity_bond_exists">
              <a
                onClick={(e) => e.stopPropagation()}
                rel="noopener noreferrer"
                href="https://github.com/JoinMarket-Org/joinmarket-clientserver/blob/master/docs/fidelity-bonds.md#what-amount-of-bitcoins-to-lock-up-and-for-how-long"
              >
                {/* i18n placeholder */}
              </a>
            </Trans>

ya my fault.. It somehow disappeared from my code. Added it back now.. and css file has also been omitted.

Nice. Looks good!

There really should be little to no reason for users to have more than one active fidelity bond, so I think this message can be emphasized a bit more. But I am okay with this being tackled in a follow-up PR.

Great work @barrytra - way better than before 💪