Replace quick start navigation arrows with those of status buffer

[aadcg]

With the addition of the new arrows, it would be great to be consistent.

@jmercouris? :)

[jmercouris]

it can be done, depends on what Thomas thinks!

[jmercouris]

@lansingthomas what say ye?

[lansingthomas]

Good idea.
Consistency is good for users.

Let's change the color of the buttons to reflect interaction state as as well.
Backward (not-clickable)

• surface: primary
• text contrast-text

Backward (clickable)

• surface: action
• text contrast-text

Forward (not clickable)

• surface: primary
• text contrast-text

Forward (clickable)

• surface: action
• text contrast-text

[lansingthomas]

Dark theme:
backward: (not-clickable)

backward (clickable)

Forward (not-clickable)

Forward (clickable)

[lansingthomas]

I want that nice blue to guide our new nyxters down the path :D

[jmercouris]

I shall prrrrrovide.

[lansingthomas]

@jmercouris while you are in there, would you please make it so that left and right arrow keys change the pages appropriately in the quick-start

[aadcg]

@jmercouris while you are in there, would you please make it so that left and right arrow keys change the pages appropriately in the quick-start

What's not working with respect to the arrows in the quick-start?

[jmercouris]

I believe Thomas means the keyboard arrows.

[aadcg]

@jmercouris, I see - binding keys in panel buffers. I think we lack the technical foundations to do that without a half-baked hack since we don't have the concept of focus in panel buffers.

---

@lansingthomas notice that in the proposed spec, the contrast between background and foreground is poor for all clickable elements. For instance, the contrast between #37a8e4 and #ffffff is less than 3. Given that these elements are extremely small, I would advice against it. The color that contrasts with #37a8e4 is black, not white.

[lansingthomas]

Yeah good point Andre.

@jmercouris can you pretty please try these combos for the clickable-arrow-panel-buffer-buttons:

light theme default state: action (#37A8E4) for the surface color and text+ (#000000) for the arrow icons.
light theme hovered state: action+ (#72CDFE) for the surface color and text+ (#000000) for the arrow icons.

dark theme (amphora) default state: action (#4C21AB) for the surface color and text+ (#FFFFFF) for the arrow icons.
dark theme (amphora) hovered state: action+ (#571FD2) for the surface color and text+ (#FFFFFF) for the arrow icons.

[aadcg]

@lansingthomas pro tip: if you surround hex colors in between ticks (`...`), the color is displayed.

Example: #37a8e4 (`#37a8e4`)

[jmercouris]

Started on branch: quickstart-navigation-arrows but I can't yet get the computer to agree with me. A little more work yet.

[lansingthomas]

@lansingthomas pro tip: if you surround hex colors in between ticks (...), the color is displayed.

aaaaaaaah coool #37a8e4
Thank you Andre :D

[jmercouris]

Notice, the Pull request I made does not address the color changes. That is part of a bigger issue which I will tackle soon after!