From c64cc99cea581bb42428c96beb74b9e2d3ea2ce8 Mon Sep 17 00:00:00 2001 From: Krishna Subramanian Date: Sun, 14 Jun 2026 14:02:24 +0200 Subject: [PATCH] feat(ui): apply devolo branding theme - Replace upstream purple (#551f62) with devolo blue (#0072B4) - Sidebar background and menu title changed to devolo blue - Menu text color changed from gray to white for contrast - Widget/tab/tag text labels changed to dark gray (#333333) - Add devolo logo to top-left of page header alongside hawkBit logo - Add devolo_logo.svg to theme images - Spinner colors updated to devolo blue - Update presentation slide theme (hawkBit.css) to devolo blue - Fix .gitignore: split merged .gitmodulesTASKS.md entry; add .superpowers/, .github/copilot-instructions.md, hawkbit_dev.*.dump/ Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .gitignore | 6 +++- docs/static/slides/css/theme/hawkBit.css | 6 ++-- .../themes/hawkbit/customstyles/common.scss | 5 +-- .../customstyles/hawkbitvariables.scss | 34 +++++++++++-------- .../themes/hawkbit/customstyles/others.scss | 4 +-- .../themes/hawkbit/images/devolo_logo.svg | 20 +++++++++++ 6 files changed, 53 insertions(+), 22 deletions(-) create mode 100755 hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/images/devolo_logo.svg diff --git a/.gitignore b/.gitignore index a6cb44ed01..5a3a97bf67 100644 --- a/.gitignore +++ b/.gitignore @@ -66,4 +66,8 @@ docs/themes/** docs/public/** docs/content/rest-api/*.html docs/.hugo_build.lock -.gitmodules \ No newline at end of file +.gitmodules +TASKS.md +.superpowers/ +.github/copilot-instructions.md +hawkbit_dev.*.dump/ diff --git a/docs/static/slides/css/theme/hawkBit.css b/docs/static/slides/css/theme/hawkBit.css index a7502d6f98..7f2e140722 100644 --- a/docs/static/slides/css/theme/hawkBit.css +++ b/docs/static/slides/css/theme/hawkBit.css @@ -39,7 +39,7 @@ body { font-family: Helvetica, Arial, sans-serif; font-size: 25px; font-weight: normal; - color: #551f62; d + color: #0072B4; } .reveal .controls { @@ -102,7 +102,7 @@ body { .reveal .intro { - color: #551f62; + color: #0072B4; } .noborder img { @@ -112,7 +112,7 @@ body { } .intro { - color: #551f62; + color: #0072B4; position: relative; top: 250px; left: 0px; diff --git a/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/common.scss b/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/common.scss index ceef0ded40..226a220f8d 100644 --- a/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/common.scss +++ b/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/common.scss @@ -88,8 +88,9 @@ } .view-header:after { - background: $logo-image no-repeat right top; - background-position: $logo-position; + background: $devolo-logo-image no-repeat $devolo-logo-position, + $logo-image no-repeat $logo-position; + background-size: auto 30px, auto auto; content: ""; height: 70px; position: absolute; diff --git a/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/hawkbitvariables.scss b/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/hawkbitvariables.scss index 48a15d5671..dd731da6e1 100644 --- a/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/hawkbitvariables.scss +++ b/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/hawkbitvariables.scss @@ -8,8 +8,8 @@ * SPDX-License-Identifier: EPL-2.0 */ //Standard colors -$hawkbit-primary-color: #551f62; -$hawkbit-primary-color-light: #551f62; +$hawkbit-primary-color: #0072B4; +$hawkbit-primary-color-light: #0072B4; //Logo image for the top right corner $logo-image: url('images/hawkbit_logo.png'); @@ -17,6 +17,12 @@ $logo-image: url('images/hawkbit_logo.png'); //Logo image postion $logo-position: right 8px top 8px; +//devolo logo image for the top left corner +$devolo-logo-image: url('images/devolo_logo.svg'); + +//devolo logo position +$devolo-logo-position: left 12px top 12px; + //Application text font size.All widget text style are computed based on this $app-text-font-size: 16px; @@ -27,22 +33,22 @@ $app-font-family: "Open Sans", sans-serif; $app-background-color: #fafafa; //Font color for individual selection overlay list items -$app-selection-item-selection-color: #551f62; +$app-selection-item-selection-color: #0072B4; //Color of the focus outline/border for focusable elements -$app-focus-color: #551f62; +$app-focus-color: #0072B4; //Color for any selection highlights in the application -$app-selection-color: #551f62; +$app-selection-color: #0072B4; //Tag button caption color -$tag-text-color: #551f62; +$tag-text-color: #333333; //Tabsheet tab caption color -$tab-sheet-caption-color: #551f62; +$tab-sheet-caption-color: #333333; //Table details widget text color -$table-details-tab-font-color: #551f62; +$table-details-tab-font-color: #333333; //All widgets background $widget-bg: #fff; @@ -51,22 +57,22 @@ $widget-bg: #fff; $widget-border-color: #d4d4d4; //Widget header caption color -$widget-caption-color: #551f62; +$widget-caption-color: #333333; //Text color of menu items and links in menu -$menu-text-color: #a5a5a5; +$menu-text-color: #FFFFFF; //Menu background color -$valo-menu-background-color: #4b4b4b; +$valo-menu-background-color: #0072B4; //Size of menu icon when icon is displayed with menu description $menu-with-description-font-icon-size: 14px; //Menu title background color -$menu-title-bg-color: #551f62; +$menu-title-bg-color: #0072B4; //Color of icons like add ,config,search etc -$button-icon-color: #551f62; +$button-icon-color: #0072B4; //Color of installed distribution,when target is selected @@ -76,7 +82,7 @@ $installed-row-color: $dark-green-color; $assigned-row-color: $lighter-orange-color; // Background color of accordion caption in confirmation popup -$accordion-action-history-title-color: #551f62; +$accordion-action-history-title-color: #0072B4; //Success icon color on valid target filter query $success-icon-color: #008000; diff --git a/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/others.scss b/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/others.scss index 467da61b3c..4e1a6cbb7f 100644 --- a/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/others.scss +++ b/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/others.scss @@ -260,8 +260,8 @@ -moz-box-sizing: border-box; box-sizing: border-box; border: 2px solid transparent; - border-top-color: #551f62; - border-right-color: #551f62; + border-top-color: #0072B4; + border-right-color: #0072B4; border-radius: 100%; -webkit-animation: v-rotate-360 500ms infinite linear; -moz-animation: v-rotate-360 500ms infinite linear; diff --git a/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/images/devolo_logo.svg b/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/images/devolo_logo.svg new file mode 100755 index 0000000000..ea1e46bc67 --- /dev/null +++ b/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/images/devolo_logo.svg @@ -0,0 +1,20 @@ + + + + + + +