fix: Fixes #494 Drag vs Context menu. Import options page error and colour

[ltfschoen]

Currently when the user right-clicks the Fether window the 'contextmenu' is not always shown since it can't do this at the same time as when the drag window functionality is available i.e. -webkit-app-region: drag; https://electronjs.org/docs/api/frameless-window#draggable-region

On Linux here is an example of the new functionality on a few of the pages:

• account list page

  • header left (i.e. blank)
    • left-click - nothing
    • left-hold-move - nothing *
    • right-click - context menu
  • header middle (i.e. page title)
    • left-click - nothing
    • left-hold-move - drag
    • right-click - nothing *
  • header right
    • left-click - create new account
    • left-hold-move - nothing *
    • right-click - context menu
  • body account cards
    • left-click - opens account
    • left-hold-move - nothing *
    • right-click - context menu
  • body general (i.e. if there are only a couple of account cards, the space below them and above the footer)
    • left-click - nothing
    • left-hold-move - nothing *
    • right-click - context menu
  • footer feedback
    • left-click - opens link
    • left-hold-move - nothing *
    • right-click - context menu
  • footer general
    • left-click - nothing
    • left-hold-move - drag
    • right-click - nothing *

• account page

  • header left (i.e. back button)
    • left-click - go back
    • left-hold-move - nothing *
    • right-click - context menu
  • header middle (i.e. account address)
    • left-click - copy address
    • left-hold-move - nothing *
    • right-click - context menu
  • header right
    • left-click - token menu
    • left-hold-move - nothing *
    • right-click - context menu
  • body token cards
    • left-click - go to send token page
    • left-hold-move - nothing *
    • right-click - context menu
  • body general (i.e. if there are only a couple of token cards, the space below them and above the footer)
    • same as account list page
  • footer general
    • same as account list page

• send ether / token page

  • header left (i.e. back button)
    • same as account page
  • header middle (i.e. page title)
    • same as account list page
  • header right
    • left-click - nothing
    • left-hold-move - nothing *
    • right-click - context menu
  • body token card
    • left-click - nothing
    • left-hold-move - nothing *
    • right-click - context menu
  • body input fields (i.e. to, amount, tx speed, buttons)
    • left-click - input or nothing
    • left-hold-move - nothing *
    • right-click - context menu

• does not work since cannot use contextmenu event (show Fether context menu) on elements that also use -webkit-app-region: drag (drag to move Fether window around the screen)

Note that the import account recover from seed phrase section of code was refactored because as a result of the changes the "next button" was overlayed by the footer.

Note that whilst I understand that notifications will be undertaken in a separate PR, currently the notifications when importing an account are not always obvious (since there's not enough space at the moment for the notifications, just a scrollbar appears when a notification occurs that requires them to scroll down to see it, but the user may not realise why the scrollbar appeared). So I've made a few tweaks just to make the notifications more obvious in the interim until we refactor the import account pages and add notifications.

[Tbaut]

👍 Works well thanks

[axelchalon]

👍