Update buttons style (#1122)

* Buttons updated to reflect the design system.

Author: francescospissu

Diff for: 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',

Diff for: 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",

Diff for: 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",

Diff for: 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);
               }}

Diff for: 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;
-}
+}

Diff for: 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:

Diff for: 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 */

Diff for: arduino-ide-extension/src/browser/style/fonts/OpenSans-Bold-webfont.woff

@@ -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;
 }

Diff for: arduino-ide-extension/src/browser/style/fonts/OpenSans-Regular-webfont.woff

@@ -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;
 }
 

Diff for: arduino-ide-extension/src/browser/style/index.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;
 
 }

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

@@ -61,7 +61,9 @@ export class NotificationComponent extends TheiaNotificationComponent {
                   actions.map((action, index) => (
                     <button
                       key={messageId + `-action-${index}`}
-                      className="theia-button"
+                      className={`theia-button ${
+                        index !== actions.length - 1 ? 'secondary' : ''
+                      }`}
                       data-message-id={messageId}
                       data-action={action}
                       onClick={this.onAction}

Diff for: arduino-ide-extension/src/browser/style/main.css

@@ -72,7 +72,10 @@ export class ListItemRenderer<T extends ArduinoComponent> {
     );
     const onClickInstall = () => install(item);
     const installButton = item.installable && (
-      <button className="theia-button install" onClick={onClickInstall}>
+      <button
+        className="theia-button secondary install"
+        onClick={onClickInstall}
+      >
         {nls.localize('arduino/component/install', 'INSTALL')}
       </button>
     );
@@ -121,8 +124,8 @@ export class ListItemRenderer<T extends ArduinoComponent> {
         </div>
         <div className="info">{moreInfo}</div>
         <div className="footer">
-          {installButton}
           {versions}
+          {installButton}
         </div>
       </div>
     );