From f69b799cc10bafb3ec69aa0980acdd61b884ef00 Mon Sep 17 00:00:00 2001 From: Mark Sujew Date: Tue, 28 Feb 2023 15:44:00 +0000 Subject: [PATCH 1/2] Align border-radius with vscode --- .../browser/common-frontend-contribution.ts | 4 +- packages/core/src/browser/dialogs.ts | 2 +- packages/core/src/browser/style/dialog.css | 3 ++ packages/core/src/browser/style/index.css | 2 + packages/core/src/browser/style/menus.css | 42 +++++++++++++++---- .../src/browser/keybindings-widget.tsx | 4 +- .../src/browser/style/notifications.css | 12 ++++-- .../data/monaco-themes/vscode/dark_vs.json | 1 + .../src/browser/styles/index.css | 1 + 9 files changed, 55 insertions(+), 16 deletions(-) diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts index d94d690d47d8a..ba058fd79bafe 100644 --- a/packages/core/src/browser/common-frontend-contribution.ts +++ b/packages/core/src/browser/common-frontend-contribution.ts @@ -1826,8 +1826,8 @@ export class CommonFrontendContribution implements FrontendApplicationContributi }, { id: 'menubar.selectionBackground', defaults: { - dark: Color.transparent('#ffffff', 0.1), - light: Color.transparent('#000000', 0.1) + dark: 'toolbar.hoverBackground', + light: 'toolbar.hoverBackground' }, description: 'Background color of the selected menu item in the menubar.' }, { diff --git a/packages/core/src/browser/dialogs.ts b/packages/core/src/browser/dialogs.ts index a8e626b608827..9d79982b3c1d2 100644 --- a/packages/core/src/browser/dialogs.ts +++ b/packages/core/src/browser/dialogs.ts @@ -180,7 +180,7 @@ export abstract class AbstractDialog extends BaseWidget { titleContentNode.appendChild(this.titleNode); this.closeCrossNode = this.node.ownerDocument.createElement('i'); - this.closeCrossNode.classList.add(...codiconArray('close')); + this.closeCrossNode.classList.add(...codiconArray('close', true)); this.closeCrossNode.classList.add('closeButton'); titleContentNode.appendChild(this.closeCrossNode); diff --git a/packages/core/src/browser/style/dialog.css b/packages/core/src/browser/style/dialog.css index 204ad8c60fc44..91507630f1f0f 100644 --- a/packages/core/src/browser/style/dialog.css +++ b/packages/core/src/browser/style/dialog.css @@ -33,9 +33,12 @@ display: flex; flex-direction: column; min-width: 400px; + min-height: 150px; color: var(--theia-editorWidget-foreground); background-color: var(--theia-editorWidget-background); border: 1px solid var(--theia-contrastBorder); + border-radius: 4px; + overflow: hidden; box-shadow: 0 0px 8px var(--theia-widget-shadow); } .p-Widget.dialogOverlay .dialogTitle { diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css index d0f8cb234bbdc..c405476ea1671 100644 --- a/packages/core/src/browser/style/index.css +++ b/packages/core/src/browser/style/index.css @@ -118,6 +118,7 @@ blockquote { font-size: var(--theia-ui-font-size1); line-height: var(--theia-content-line-height); padding-left: 5px; + border-radius: 2px; } .theia-input[type="text"] { @@ -263,6 +264,7 @@ blockquote { cursor: pointer; padding: 4px 9px; margin-left: calc(var(--theia-ui-padding) * 2); + border-radius: 2px; } .theia-button:focus { diff --git a/packages/core/src/browser/style/menus.css b/packages/core/src/browser/style/menus.css index f6bf9c4f2b696..554e9bfa3d985 100644 --- a/packages/core/src/browser/style/menus.css +++ b/packages/core/src/browser/style/menus.css @@ -29,6 +29,8 @@ |----------------------------------------------------------------------------*/ .p-Widget.p-MenuBar { + display: flex; + align-items: center; padding-left: 5px; font-size: var(--theia-ui-font-size1); } @@ -37,9 +39,15 @@ transform: translateY(calc(-2 * var(--theia-border-width))); } +.p-MenuBar-content { + display: flex; + align-items: center; +} + .p-MenuBar-item { padding: 0px 8px; - line-height: var(--theia-private-menubar-height); + line-height: var(--theia-content-line-height); + border-radius: 4px; } .p-MenuBar-item .p-MenuBar-itemLabel { @@ -96,12 +104,13 @@ .p-Menu { z-index: var(--theia-menu-z-index); - padding: 4px 0px; + padding: 4px; background: var(--theia-menu-background); color: var(--theia-menu-foreground); font-size: var(--theia-ui-font-size1); box-shadow: 0px 1px 6px var(--theia-widget-shadow); border: 1px solid var(--theia-menu-border); + border-radius: 5px; } .p-Menu:focus { @@ -113,16 +122,35 @@ max-height: var(--theia-private-menu-item-height); padding: 0px; line-height: var(--theia-private-menu-item-height); + overflow: hidden; } .p-Menu-item.p-mod-active { - background: var(--theia-menu-selectionBackground); color: var(--theia-menu-selectionForeground); border: thin solid var(--theia-menu-selectionBorder); opacity: 1; cursor: pointer; } +/** + * We cannot apply border-radius on items with `display: table-row` + * So we apply it to its first and last child + */ + +.p-Menu-item.p-mod-active > div { + background: var(--theia-menu-selectionBackground); +} + +.p-Menu-item.p-mod-active > div:first-child { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} + +.p-Menu-item.p-mod-active > div:last-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + .p-Menu-item.p-mod-disabled { opacity: var(--theia-mod-disabled-opacity); } @@ -165,12 +193,12 @@ var(--theia-menu-separatorBackground); } -.p-Menu-item[data-type="separator"] > div.p-Menu-itemIcon::after { - margin-left: 12px; +.p-Menu-item[data-type="separator"] > div:first-child:after { + margin-left: -4px; } -.p-Menu-item[data-type="separator"] > div.p-Menu-itemSubmenuIcon::after { - margin-right: 12px; +.p-Menu-item[data-type="separator"] > div:last-child::after { + margin-right: -4px; } .p-Menu-itemIcon::before, diff --git a/packages/keymaps/src/browser/keybindings-widget.tsx b/packages/keymaps/src/browser/keybindings-widget.tsx index 27991c71b8bd8..3347002dba648 100644 --- a/packages/keymaps/src/browser/keybindings-widget.tsx +++ b/packages/keymaps/src/browser/keybindings-widget.tsx @@ -399,7 +399,7 @@ export class KeybindingWidget extends ReactWidget implements StatefulWidget { return { e.preventDefault(); this.editKeybinding(item); - }}>; + }}>; } /** @@ -412,7 +412,7 @@ export class KeybindingWidget extends ReactWidget implements StatefulWidget { ? { e.preventDefault(); this.resetKeybinding(item); - }}> : ''; + }}> : ''; } /** diff --git a/packages/messages/src/browser/style/notifications.css b/packages/messages/src/browser/style/notifications.css index 9de8ce092aaba..fe03d06c7bab7 100644 --- a/packages/messages/src/browser/style/notifications.css +++ b/packages/messages/src/browser/style/notifications.css @@ -37,15 +37,15 @@ /* Toasts */ -.theia-notifications-container.theia-notification-toasts - .theia-notification-list-item-container { +.theia-notifications-container.theia-notification-toasts .theia-notification-list-item-container { + border-radius: 4px; margin-top: 6px; } -.theia-notifications-container.theia-notification-toasts - .theia-notification-list-item { +.theia-notifications-container.theia-notification-toasts .theia-notification-list-item { box-shadow: 0px 0px 4px 0px var(--theia-widget-shadow); border: 1px solid var(--theia-notificationToast-border); + border-radius: 4px; } /* Center */ @@ -53,6 +53,8 @@ .theia-notifications-container.theia-notification-center { background-color: var(--theia-notifications-background); border: 1px solid var(--theia-notificationCenter-border); + border-radius: 4px; + overflow: hidden; box-shadow: 0px 0px 6px 0px var(--theia-widget-shadow); } @@ -85,6 +87,8 @@ .theia-notification-list-scroll-container { max-height: 300px; overflow: auto; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; } .theia-notification-list { diff --git a/packages/monaco/data/monaco-themes/vscode/dark_vs.json b/packages/monaco/data/monaco-themes/vscode/dark_vs.json index ad08abf1f716a..ba0656d7ae9e9 100644 --- a/packages/monaco/data/monaco-themes/vscode/dark_vs.json +++ b/packages/monaco/data/monaco-themes/vscode/dark_vs.json @@ -14,6 +14,7 @@ "input.placeholderForeground": "#A6A6A6", "menu.background": "#252526", "menu.foreground": "#CCCCCC", + "menu.border": "#454545", "statusBarItem.remoteForeground": "#FFF", "statusBarItem.remoteBackground": "#16825D", "ports.iconRunningProcessForeground": "#369432", diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css index d3380da5e46f7..b30f3c31e3925 100644 --- a/packages/search-in-workspace/src/browser/styles/index.css +++ b/packages/search-in-workspace/src/browser/styles/index.css @@ -66,6 +66,7 @@ border-style: solid; border-width: var(--theia-border-width); border-color: var(--theia-input-background); + border-radius: 2px; } .t-siw-search-container .searchHeader .search-field-container.focused { From ebbbdc2044addc9fdb2e9606c4ee874a1a77ae82 Mon Sep 17 00:00:00 2001 From: Mark Sujew Date: Fri, 23 Jun 2023 11:26:51 +0000 Subject: [PATCH 2/2] Adjust border radius of select and alerts --- packages/core/src/browser/style/alert-messages.css | 3 +++ packages/core/src/browser/style/index.css | 2 +- packages/core/src/browser/style/select-component.css | 2 ++ 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/core/src/browser/style/alert-messages.css b/packages/core/src/browser/style/alert-messages.css index 1e9798fd9fd86..3c31a20cf89d7 100644 --- a/packages/core/src/browser/style/alert-messages.css +++ b/packages/core/src/browser/style/alert-messages.css @@ -36,6 +36,7 @@ background-color: var(--theia-inputValidation-infoBackground); border: var(--theia-border-width) solid var(--theia-inputValidation-infoBorder); + border-radius: 4px; color: var(--theia-inputValidation-infoForeground); padding: 10px; } @@ -45,6 +46,7 @@ background-color: var(--theia-inputValidation-warningBackground); border: var(--theia-border-width) solid var(--theia-inputValidation-warningBorder); + border-radius: 4px; color: var(--theia-inputValidation-warningForeground); padding: 10px; } @@ -54,6 +56,7 @@ background-color: var(--theia-inputValidation-errorBackground); border: var(--theia-border-width) solid var(--theia-inputValidation-errorBorder); + border-radius: 4px; color: var(--theia-inputValidation-errorForeground); padding: 10px; } diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css index c405476ea1671..0abb17ae62bd0 100644 --- a/packages/core/src/browser/style/index.css +++ b/packages/core/src/browser/style/index.css @@ -292,7 +292,7 @@ button.secondary[disabled], .theia-select { color: var(--dropdown-foreground); font-size: var(--theia-ui-font-size1); - border-radius: 0; + border-radius: 2px; border: 1px solid var(--theia-dropdown-border); background: var(--theia-dropdown-background); outline: none; diff --git a/packages/core/src/browser/style/select-component.css b/packages/core/src/browser/style/select-component.css index 1165b40bc6002..fdcc1e175498f 100644 --- a/packages/core/src/browser/style/select-component.css +++ b/packages/core/src/browser/style/select-component.css @@ -25,6 +25,7 @@ display: flex; align-items: center; user-select: none; + border-radius: 2px; } .theia-select-component .theia-select-component-label { @@ -48,6 +49,7 @@ outline-offset: -1px; user-select: none; overflow: auto; + border-radius: 2px; } .theia-select-component-dropdown .theia-select-component-option {