From 84a76909e2a055e69d3f05393e04d5261f264fc0 Mon Sep 17 00:00:00 2001 From: Joe Pavitt Date: Fri, 8 Mar 2024 10:51:25 +0000 Subject: [PATCH] Improve the appearance of the Node-RED primary header --- .../@node-red/editor-client/src/sass/base.scss | 2 +- .../editor-client/src/sass/colors.scss | 3 ++- .../editor-client/src/sass/header.scss | 10 +++++++--- .../@node-red/editor-client/src/sass/sizes.scss | 17 +++++++++++++++++ .../src/sass/style-custom-theme.scss | 1 + .../@node-red/editor-client/src/sass/style.scss | 1 + .../editor-client/src/sass/variables.scss | 4 ++++ 7 files changed, 33 insertions(+), 5 deletions(-) create mode 100644 packages/node_modules/@node-red/editor-client/src/sass/sizes.scss diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss index 92a98913f..58e77863d 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss @@ -38,7 +38,7 @@ body { } #red-ui-main-container { position: absolute; - top:40px; left:0; bottom: 0; right:0; + top: var(--red-ui-header-height); left:0; bottom: 0; right:0; overflow:hidden; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss index ce71bcdba..b561fde16 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss @@ -259,7 +259,8 @@ $deploy-button-background-disabled-hover: #555; $header-background: #000; $header-button-background-active: #121212; -$header-menu-color: #C7C7C7; +$header-accent: #d41313; +$header-menu-color: #eee; $header-menu-color-disabled: #666; $header-menu-heading-color: #fff; $header-menu-sublabel-color: #aeaeae; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/header.scss b/packages/node_modules/@node-red/editor-client/src/sass/header.scss index 723c1e9bd..a80ad3a17 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/header.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/header.scss @@ -23,16 +23,20 @@ top: 0; left: 0; width: 100%; - height: 40px; + height: var(--red-ui-header-height); background: var(--red-ui-header-background); box-sizing: border-box; padding: 0px 0px 0px 20px; color: var(--red-ui-header-menu-color); font-size: 14px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 2px solid var(--red-ui-header-accent); + padding-top: 2px; span.red-ui-header-logo { float: left; - margin-top: 5px; font-size: 30px; line-height: 30px; text-decoration: none; @@ -42,7 +46,7 @@ vertical-align: middle; font-size: 16px !important; &:not(:first-child) { - margin-left: 5px; + margin-left: 8px; } } img { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sizes.scss b/packages/node_modules/@node-red/editor-client/src/sass/sizes.scss new file mode 100644 index 000000000..a3d48e76d --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/sass/sizes.scss @@ -0,0 +1,17 @@ +/** + * Copyright JS Foundation and other contributors, http://js.foundation + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ + + $header-height: 48px; \ No newline at end of file diff --git a/packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss b/packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss index 1202d9fb7..312081503 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss @@ -15,4 +15,5 @@ **/ @import "colors"; +@import "sizes"; @import "variables"; \ No newline at end of file diff --git a/packages/node_modules/@node-red/editor-client/src/sass/style.scss b/packages/node_modules/@node-red/editor-client/src/sass/style.scss index 7910832ad..412290f78 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/style.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/style.scss @@ -15,6 +15,7 @@ **/ @import "colors"; +@import "sizes"; @import "variables"; @import "mixins"; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/variables.scss b/packages/node_modules/@node-red/editor-client/src/sass/variables.scss index 50e1c9310..c04c26ff9 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/variables.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/variables.scss @@ -16,6 +16,9 @@ --red-ui-shadow: #{$shadow}; + // Header Height + --red-ui-header-height: #{$header-height}; + // Main body text --red-ui-primary-text-color: #{$primary-text-color}; // UI control label text @@ -240,6 +243,7 @@ --red-ui-header-background: #{$header-background}; + --red-ui-header-accent: #{$header-accent}; --red-ui-header-button-background-active: #{$header-button-background-active}; --red-ui-header-menu-color: #{$header-menu-color}; --red-ui-header-menu-color-disabled: #{$header-menu-color-disabled};