Fix the fonts

[huyz]

The font for the clickable actions isn't great. Take a look:

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]

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]

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]

@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]

@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]

Ok that is a quick test:

[3rdvision]

Ok that is a quick test:

Was that just using CSS? Nice!

[dreamos82]

yeah, just using css.

[3rdvision]

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]

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

[dreamos82]

I would say this one is even better:

the css code:

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

[3rdvision]

I would say this one is even better:

the css code:

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

Looks neat and blends well with the rest! 😄