Update buttons style (#1122)

* Buttons updated to reflect the design system.
This commit is contained in:
Francesco Spissu 2022-07-08 10:43:10 +02:00 committed by GitHub
parent a36524e02a
commit d7a2d83990
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 68 additions and 157 deletions

View File

@ -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',

View File

@ -1,128 +0,0 @@
{
"tokenColors": [
{
"settings": {
"foreground": "#434f54"
}
},
{
"name": "Comments",
"scope": "comment",
"settings": {
"foreground": "#95a5a6cc"
}
},
{
"name": "Keywords Attributes",
"scope": [
"storage",
"support",
"string.quoted.single.c"
],
"settings": {
"foreground": "#00979D"
}
},
{
"name": "literal",
"scope": [
"meta.function.c",
"entity.name.function",
"meta.function-call.c",
"variable.other"
],
"settings": {
"foreground": "#D35400"
}
},
{
"name": "punctuation",
"scope": [
"punctuation.section",
"meta.function-call.c",
"meta.block.c",
"meta.function.c",
"entity.name.function.preprocessor.c",
"meta.preprocessor.macro.c",
"variable",
"variable.name"
],
"settings": {
"foreground": "#434f54"
}
},
{
"name": "constants",
"scope": [
"string.quoted.double",
"constant"
],
"settings": {
"foreground": "#005C5F"
}
},
{
"name": "meta keywords",
"scope": [
"keyword.control",
"meta.preprocessor.c"
],
"settings": {
"foreground": "#728E00"
}
},
{
"name": "numeric preprocessor",
"scope": [
"meta.preprocessor.macro.c",
"constant.numeric.preprocessor.c",
"meta.preprocessor.c"
],
"settings": {
"foreground": "#434f54"
}
}
],
"colors": {
"list.highlightForeground": "#005c5f",
"list.activeSelectionForeground": "#424242",
"list.activeSelectionBackground": "#DAE3E3",
"list.inactiveSelectionForeground": "#424242",
"list.inactiveSelectionBackground": "#DAE3E3",
"list.hoverBackground": "#ECF1F1",
"progressBar.background": "#005c5f",
"editor.background": "#ffffff",
"editorCursor.foreground": "#434f54",
"editor.foreground": "#434f54",
"editorWhitespace.foreground": "#bfbfbf",
"editor.lineHighlightBackground": "#434f5410",
"editor.selectionBackground": "#ffcb00",
"editorWidget.background": "#F7F9F9",
"focusBorder": "#7fcbcd99",
"menubar.selectionBackground": "#ffffff",
"menubar.selectionForeground": "#212121",
"menu.selectionBackground": "#dae3e3",
"menu.selectionForeground": "#212121",
"editorGroupHeader.tabsBackground": "#f7f9f9",
"button.background": "#7fcbcd",
"titleBar.activeBackground": "#005c5f",
"titleBar.activeForeground": "#ffffff",
"terminal.background": "#000000",
"terminal.foreground": "#e0e0e0",
"dropdown.border": "#ececec",
"dropdown.background": "#ececec",
"activityBar.background": "#ececec",
"activityBar.foreground": "#616161",
"statusBar.background": "#005c5f",
"secondaryButton.background": "#b5c8c9",
"secondaryButton.foreground": "#ececec",
"secondaryButton.hoverBackground": "#dae3e3",
"arduino.branding.primary": "#00979d",
"arduino.branding.secondary": "#b5c8c9",
"arduino.foreground": "#edf1f1",
"arduino.output.foreground": "#FFFFFF",
"arduino.output.background": "#000000"
},
"type": "light",
"name": "Arduino"
}

View File

@ -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",

View File

@ -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",

View File

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

View File

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

View File

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

View File

@ -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 */

View File

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

View File

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

View File

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

View File

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

View File

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