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 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.

[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. :rocket:

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 :muscle: