Update buttons style

[francescospissu]

Motivation

Buttons need to be updated to reflect the design system.

Change description

Changed the style of the buttons via CSS and and other minor changes.

Other information

Currently some colors do not reflect the design system because the related variables are not yet available. This PR cannot be merged until the variables are ready.

Reviewer checklist

• PR addresses a single concern.
• The PR has no duplicates (please search among the Pull Requests before creating one)
• PR title and description are properly filled.
• Docs have been added / updated (for bug fixes / features)

[AlbyIanna]

LGTM

[kittaakos]

It would be better to have it at build time instead of fetching it. Or how does this work? 😊 Thank you!

[francescospissu]

I added it taking into account how something like this is already implemented here:

arduino-ide/arduino-ide-extension/src/browser/style/fonts.css

Lines 1 to 10 in 7f2b849

	@font-face {
	font-family: 'FontAwesome';
	src:
	url('fonts/FontAwesome.ttf?nuchcq') format('truetype'),
	url('fonts/FontAwesome.woff?nuchcq') format('woff'),
	url('fonts/FontAwesome.svg?nuchcq#FontAwesome') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
	}

I'll investigate how to add it at compile time. Thank you.

[fstasi]

@francescospissu I think Akos comment was related to the fact that
src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2'); will not work without internet connection. (see the HTTP fetch)

while url('fonts/FontAwesome.woff?nuchcq') format('woff') does, as the font is in the source files.

I agree we should avoid the fetch if possible

[francescospissu]

I added the Open Sans font file in the fonts folder, here.
In this way we can avoid the fetch.

[91volt]

@francescospissu Great work, we are almost there in term of adherence to the design, some fixes:

• The font weight is 600
• the vertical alignment needs to be slightly adjusted
• Stroke width should be 1.5

On the left the design | On the right the current implementation

[fstasi]

lgtm

[fstasi]

lgtm

[91volt]

👌 perfect

[kittaakos]

I like the new buttons. 😍 Is this the final design? Wouldn't it be a little bit better with spacing between the <input> and the buttons? What do you think? Thanks!

[francescospissu]

I didn't notice, I'm fixing it. Thank you @kittaakos 👍