Update buttons style (#1122)

* Buttons updated to reflect the design system.

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

@@ -55,7 +55,8 @@
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection .dialogRow:first-child {
-    margin-top: 0px;
+    margin-top: 0px;    
+    height: 32px;
 }
 
 .fl1{
@@ -69,4 +70,4 @@
 
 .fa.disabled {
     opacity: .4;
-}
+}

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

@@ -1,3 +1,8 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: url('fonts/OpenSans-Bold-webfont.woff') format('woff');
+}
+
 @font-face {
   font-family: 'FontAwesome';
   src:

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

@@ -60,25 +60,51 @@
 /* Overrule the default Theia CSS button styles. */
 button.theia-button,
 .theia-button {
-  border: 1px solid var(--theia-dropdown-border);
-}
-
-button.theia-button:hover,
-.theia-button:hover {
-  border: 1px solid var(--theia-focusBorder);
+  align-items: center;
+  display: flex;
+  font-family: 'Open Sans',sans-serif;
+  font-style: normal;
+  font-weight: 700;  
+  font-size: 14px;
+  justify-content: center;
+  cursor: pointer;
+  letter-spacing: .01em;
+  line-height: 24px;
+  outline: none;
+  padding: 0 16px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  border-width: 2px;
+  border-radius: 32px;
+  text-transform: uppercase;
+  transition: none;
+  box-shadow: none;
 }
 
 button.theia-button {
-  height: 31px;
+  height: 28px;
+  max-width: none;
+}
+
+.theia-button:active,
+.theia-button:focus {
+  box-shadow: 0 0 0 2px var(--theia-focusBorder);
 }
 
 button.theia-button.secondary {
-  background-color: var(--theia-secondaryButton-background);
-  color: var(--theia-secondaryButton-foreground);
+  border: 2px solid var(--theia-secondaryButton-foreground);
 }
 
-button.theia-button.main {
+button.theia-button[disabled], .theia-button[disabled] {
+  opacity: 0.5;
   color: var(--theia-button-foreground);
+  background-color: var(--theia-button-background);
+}
+
+button.secondary[disabled], .theia-button.secondary[disabled] {
+  color: var(--theia-secondaryButton-foreground);
+  background-color: var(--theia-secondaryButton-background);
 }
 
 /* To make the progress-bar slightly thicker, and use the color from the status bar */

arduino-ide-extension/src/browser/style/list-widget.css

@@ -127,12 +127,12 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
 }
 
 .component-list-item:hover .footer > * {
-    display: block;
+    display: inline-block;
     margin: 5px 0px 0px 10px;
 }
 
 .component-list-item:hover .footer > label {
-    display: block;
+    display: inline-block;
     align-self: center;
     margin: 5px 0px 0px 10px;
 }

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

@@ -20,11 +20,11 @@
     align-items: center;
     height: 24px;
     width: 24px;
-    background: var(--theia-arduino-toolbar-background);
+    background: var(--theia-arduino-toolbar-button-background);
 }
 
 .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div {
-    background: var(--theia-arduino-toolbar-hoverBackground);
+    background: var(--theia-arduino-toolbar-button-hoverBackground);
 }
 
 .arduino-verify-sketch--toolbar,
@@ -178,7 +178,7 @@
 }
 
 #arduino-open-sketch-control--toolbar--container {
-    background-color: var(--theia-arduino-toolbar-background);
+    background-color: var(--theia-arduino-toolbar-button-background);
     border-radius: 1px;
 }
 

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

@@ -44,7 +44,7 @@
 
 .active-sketch {
   font-weight: 500;
-  background-color: var(--theia-button-disabledBackground) !important;
+  background-color: var(--theia-list-activeSelectionBackground) !important;
   color: var(--theia-list-inactiveSelectionForeground) !important;
 
 }