Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lesson footers contain two primary buttons right after each other #4062

Open
3 tasks done
Asartea opened this issue Aug 4, 2023 · 5 comments
Open
3 tasks done

Lesson footers contain two primary buttons right after each other #4062

Asartea opened this issue Aug 4, 2023 · 5 comments
Labels
Status: Needs Review This issue/PR needs an initial or additional review

Comments

@Asartea
Copy link
Contributor

Asartea commented Aug 4, 2023

Complete the following REQUIRED checkboxes:

  • I have thoroughly read and understand The Odin Project Contributing Guide
  • The title of this issue follows the brief description of request format, e.g. Add dark mode to website

The following checkbox is OPTIONAL:

  • I would like to be assigned this issue to work on it

1. Description
Due to the addition of the new support The Odin Project the footer of lesson pages now contains two primary buttons right after each other, which distracting and makes it harder to clearly see which button is more important. One of these (probably the Donate now) should be changed to a different style (maybe button--dark?)

image

With button--dark:

image

2. Acceptance Criteria:

  • There is only one primary button left
@Asartea Asartea added the Status: Needs Review This issue/PR needs an initial or additional review label Aug 4, 2023
@github-project-automation github-project-automation bot moved this to 📋 Backlog / Ideas in Main Site Aug 4, 2023
@KevinMulhern
Copy link
Member

Squint test suggests this is mostly fine - whatever is closer to the center of the screen has precedence and focus. I think the complete button being larger helps define whats most important. I could see this being a problem if users scroll all the way to the bottom of the page to complete lessons.

This is all kind of subjective though so would definitely like second opinions.

@thatblindgeye
Copy link
Contributor

It'd probably be better to have only one "primary" button on the page, though I don't think making one darker would really suffice. We could make one of them a bordered button (to still differentiate it from the "plain" buttons).

@Asartea
Copy link
Contributor Author

Asartea commented Aug 24, 2023

We could make one of them a bordered button (to still differentiate it from the "plain" buttons)

What do you mean by bordered button here?

@thatblindgeye
Copy link
Contributor

Looks like we're already using those, couldn't tell from the screenshot. The "Learn more" styling is what I meant essentially (not really a button, but styled to look like one). We could update one of the "buttons" to remove the background:

image

Though in this case "donate now" is probably a little more higher priority than "learn more".

It may not be the biggest issue to keep things as-is, though... Looking at our paths page we'd have to decide if we want to tackle updating the "Select"/"Resume" buttons on that page for each path. But the grouping of the buttons there makes each primary button easily distinguishable from one another.

@ManonLef
Copy link
Member

The buttons are in visually quite different sections, and looking at their size differences makes me believe this is not in need of change perse. I don't think there is much confusion caused here and believe it could stay the way it is.

Going for a dark button looks more out of theme for me here. It gives me the idea of a disabled button in contrast to the other. The order of sections, button size, and section color difference do the trick regarding priority well enough in my opinion.

@KevinMulhern KevinMulhern removed their assignment Aug 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Review This issue/PR needs an initial or additional review
Projects
Status: 📋 Backlog / Ideas
Development

No branches or pull requests

4 participants