Update buttons style (#1122)

* Buttons updated to reflect the design system.

Author: francescospissu

arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx

@@ -598,7 +598,7 @@ export class ArduinoFrontendContribution
           'Color of the Arduino IDE foreground which is used for dialogs, such as the Select Board dialog.',
       },
       {
-        id: 'arduino.toolbar.background',
+        id: 'arduino.toolbar.button.background',
         defaults: {
           dark: 'button.background',
           light: 'button.background',
@@ -608,7 +608,7 @@ export class ArduinoFrontendContribution
           'Background color of the toolbar items. Such as Upload, Verify, etc.',
       },
       {
-        id: 'arduino.toolbar.hoverBackground',
+        id: 'arduino.toolbar.button.hoverBackground',
         defaults: {
           dark: 'button.hoverBackground',
           light: 'button.foreground',

arduino-ide-extension/src/browser/data/arduino.color-theme.json

@@ -4,7 +4,7 @@
   "colors": {
     "list.highlightForeground": "#0ca1a6",
     "list.activeSelectionForeground": "#dae3e3",
-    "list.activeSelectionBackground": "#434f54",
+    "list.activeSelectionBackground": "#0ca1a64d",
     "list.inactiveSelectionForeground": "#dae3e3",
     "list.inactiveSelectionBackground": "#434f54",
     "list.hoverBackground": "#1f272a",
@@ -45,7 +45,8 @@
     "arduino.foreground": "#edf1f1",
     "arduino.output.foreground": "#ffffff",
     "arduino.output.background": "#000000",
-    "arduino.toolbar.hoverBackground": "#dae3e3",
+    "arduino.toolbar.button.hoverBackground": "#dae3e3",
+    "arduino.toolbar.button.background": "#0ca1a6",
     "sideBar.background": "#101618",
     "sideBar.foreground": "#dae3e3",
     "input.background": "#000000",

arduino-ide-extension/src/browser/data/dark.color-theme.json

@@ -4,7 +4,7 @@
   "colors": {
     "list.highlightForeground": "#008184",
     "list.activeSelectionForeground": "#4e5b61",
-    "list.activeSelectionBackground": "#dae3e3",
+    "list.activeSelectionBackground": "#00818433",
     "list.inactiveSelectionForeground": "#4e5b61",
     "list.inactiveSelectionBackground": "#dae3e3",
     "list.hoverBackground": "#ecf1f1",
@@ -22,7 +22,7 @@
     "menu.selectionBackground": "#dae3e3",
     "menu.selectionForeground": "#212121",
     "editorGroupHeader.tabsBackground": "#ecf1f1",
-    "button.background": "#7fcbcd",
+    "button.background": "#008184",
     "button.foreground": "#f7f9f9",
     "button.hoverBackground": "#005C5F",
     "titleBar.activeBackground": "#006d70",
@@ -45,7 +45,8 @@
     "arduino.foreground": "#edf1f1",
     "arduino.output.foreground": "#ffffff",
     "arduino.output.background": "#000000",
-    "arduino.toolbar.hoverBackground": "#f7f9f9",
+    "arduino.toolbar.button.hoverBackground": "#f7f9f9",
+    "arduino.toolbar.button.background": "#7fcbcd",
     "sideBar.background": "#f7f9f9",
     "sideBar.foreground": "#4e5b61",
     "input.background": "#ffffff",

arduino-ide-extension/src/browser/data/default.color-theme.json

@@ -94,7 +94,7 @@ export const CertificateUploaderComponent = ({
           >
             <button
               type="button"
-              className="theia-button primary add-cert-btn"
+              className="theia-button secondary add-cert-btn"
               onClick={() => {
                 showAdd ? setShowAdd(false) : setShowAdd(true);
               }}

arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx

@@ -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/dialogs.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/fonts.css

@@ -60,25 +60,51 @@
 /* Overrule the default Theia CSS button styles. */
 button.theia-button,
 .theia-button {
-  border: 1px solid var(--theia-dropdown-border);
+  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:hover,
-.theia-button:hover {
-  border: 1px solid var(--theia-focusBorder);
+button.theia-button {
+  height: 28px;
+  max-width: none;
 }
 
-button.theia-button {
-  height: 31px;
+.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 */