Fixes minor styling issues of admin and admin v3 in the dashboard

[drummer83]

What? Why?

• Closes [BUU] Dashboard: Thin blue border around the Order Cycles section #11843
• Closes [BUU] Dashboard: Text ‘You have x active …’ is black for products, while it’s blue for order cycles (for multi-enterprise user) #11865

Before:

After:

What should we test?

• Activate admin style v3
• Make sure you have multiple enterprises but no order cycle open and no products.
• Visit the overview page /admin.
• Check that there is no thin blue border around the 'Manage order cycles field'.
• Check that the products section looks identical.
• Create a product.
• Open an order cycle.
• Check that the text 'You have x active ...' has the same color for products and order cycles.
• Check that the other pages remain unchanged and everything is working.

Additional changes which could be tested:

• With admin style v3 deactivated:

  • With products and order cycles active
    • Check that clickable areas turn into green when hovering
    • Check that clickable areas have no line when focusing them via TAB key
  • With NO products and NO order cycles active
    • Same as above.
  • With less than 6 enterprises available
    • Check that the enterprise list does not have a scroll bar (allowing to scroll only few px)
  • With 7 or more enterprises available
    • Check that the enterprise list has no border when focusing via TAB key

• With admin style v3 activated:

  • With products and order cycles active
    • Check that clickable areas turn into darker blue when hovering
    • Check that clickable areas have a thin dark blue line when focusing them via TAB key
  • With NO products and NO order cycles active
    • Same as above.
  • With less than 6 enterprises available
    • Check that the enterprise list does not have a scroll bar (allowing to scroll only few px)
  • With 7 or more enterprises available
    • Check that the enterprise list has a thin dotted border when focusing via TAB key (Firefox only?)

Release notes

Changelog Category (reviewers may add a label for the release notes):

• User facing changes
• API changes (V0, V1, DFC or Webhook)
• Technical changes only
• Feature toggled

The title of the pull request will be included in the release notes.

Dependencies

Documentation updates

[drummer83]

A question for @mariocarabotta:
Should we make the 'focused' pseudo-class identical with 'hover'? The focus is very difficult to see currently when using the TAB key (just a 1px line).

A question for @dacook and @mariocarabotta:
Should we get rid of the spree color definitions in admin style v3? We still have these in use in the dashboard:

$spree-blue = $color-btn-bg
$spree-green = ?
$spree-light-blue = ?

[mariocarabotta]

A questions for @mariocarabotta: Should we make the 'focused' pseudo-class identical with 'hover'? The focus is very difficult to see currently when using the TAB key (just a 1px line).

I agree it's actually quite difficult to see. @dacook had re-enabled the outline default a few weeks ago.
I am not 100% sure what this means "Should we make the 'focused' pseudo-class identical with 'hover'?" - apologies if i'm misunderstanding it!
I had a look at a few websites and it seems like they increase the default line thickness (and style too..), but don't use the hover style when focused.
maybe we could increase the thickness of the dotted line? some examples from google and nngroup below.

A question for @dacook and @mariocarabotta: Should we get rid of the spree color definitions in admin style v3? We still have these in use in the dashboard:

$spree-blue = $color-btn-bg
$spree-green = ?
$spree-light-blue = ?

mmm this one I'm definitely not familiar with - will leave it to @dacook, sorry

[dacook]

Should we get rid of the spree color definitions in admin style v3?

They definitely need cleaning up, yes. But it will be hard to do that until we remove the old design, so for now we will keep them to enable easy switching between old/new design.

[dacook]

Should we make the 'focused' pseudo-class identical with 'hover'? The focus is very difficult to see currently when using the TAB key (just a 1px line).

There's three main states to consider here:

• "Current" (the tab that's currently loaded)
• Focus (keyboard navigation with tab)
• Hover (mouse hover)

Here's a couple of examples (in that order)

(there's a couple other states but these seem to be ignored in the above examples so I've also ignored them).

I like the blue outline for focus (this is browser default anyway) which is nice and clear, and I think the darkened background on hover is a good convention too.

I would consider these changes as lower priority (the current design doesn't inhibit use of the system) but would love to see it improved one day..

[dacook]

Great!

[mkllnk]

Great!

[RachL]

Looking good, thanks @drummer83 !!! Merging :)