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

Fix the fonts #125

Open
huyz opened this issue Jun 7, 2022 · 11 comments
Open

Fix the fonts #125

huyz opened this issue Jun 7, 2022 · 11 comments

Comments

@huyz
Copy link

huyz commented Jun 7, 2022

The font for the clickable actions isn't great. Take a look:
screenshot 2022-06-07T021656Z

Not only does the font for "Add new" not suggest that it's clickable, violating web design principles, but it's the same as "Parameters", which is just a section heading. Best not to be too creative and just render all these actions as buttons.

@dreamos82
Copy link
Owner

Hi @huyz

ok to me an extension is more like an application than a web page, so probably this is why i didn't followed these principles, i tried to make things looks nice!

But i get your point that it can be misleading having same appearence for headings and buttons, so probably it will need to change, now unfortunately i'm not the one who made the buttons, they are a kind help of @3rdvision and i hope he is still around and hoping to help us finding a solution to this. Even if i like the actual design, we should at least find a way to differentiat clickable buttons from text/headers.

I'll wait some time to see if @3rdvision is willing to help, or i'll try to make changes on my own (it will take some time! :) )

@3rdvision
Copy link
Contributor

Even if i like the actual design, we should at least find a way to differentiat clickable buttons from text/headers.

@huyz Hey 👋 I'm still around 😄 ! A simple solution that could work and satisfy the requirements would be to add a class to clickable elements class="clickable" then just add css .clickable { cursor: pointer; }

@dreamos82
Copy link
Owner

@3rdvision yeah i think that at least changing the cursor can help at least to identify clickable items, and i will definetely add it on the next release. (that should arrive soon hopefully!)

But maybe @huyz has a point we could try to make the title a little bit different from the buttons? any idea?

One thing i was thinking we could add rounded borders around the buttons? Can it looks nice?

I'm open to any other suggestion! :)

@3rdvision
Copy link
Contributor

@3rdvision yeah i think that at least changing the cursor can help at least to identify clickable items, and i will definetely add it on the next release. (that should arrive soon hopefully!)

But maybe @huyz has a point we could try to make the title a little bit different from the buttons? any idea?

One thing i was thinking we could add rounded borders around the buttons? Can it looks nice?

I'm open to any other suggestion! :)

Maybe that could also be achievable just using some CSS. Maybe adding a class for buttons and for those add a solid 3px border with 10px border radius around them but it could also require some rework of the images so that will probably require more work and due diligence.

The clickable elements seems to be a quick win. On top of that I also agree that another iteration for the differentiation of buttons and titles can bring more value

@dreamos82
Copy link
Owner

Ok that is a quick test:

image

@3rdvision
Copy link
Contributor

Ok that is a quick test:

image

Was that just using CSS? Nice!

@dreamos82
Copy link
Owner

yeah, just using css.

@3rdvision
Copy link
Contributor

yeah, just using css.

Very nice! BTW the color I used for the text is #808080 in case you also want matching CSS border-color

@dreamos82
Copy link
Owner

perfect, thank you, i'll try to use it!

@dreamos82
Copy link
Owner

dreamos82 commented Jun 22, 2022

I would say this one is even better:
image

the css code:

.clickable {
    cursor: pointer;
    border-color: #808080;
    border-radius: 15px;
    border-style: groove;
}

@3rdvision
Copy link
Contributor

I would say this one is even better: image

the css code:

.clickable {
    cursor: pointer;
    border-color: #808080;
    border-radius: 15px;
    border-style: groove;
}

Looks neat and blends well with the rest! 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants