ui: Use gerrit style variables where possible and change button orderv3.12-based v3.10-based

The gerrit workflow plugin ui uses a bunch of hard-coded values for styling which break dark-mode usage. In addition, the cancel and confirm buttons are in the reverse order compared with default gerrit dialogs. This patch moves styling to use gerrit style variables where possible and switches the button order to match gerrit defaults. Fixes: QTQAINFRA-7494 Change-Id: Ib4b83e772da9cfb90464a49c7323f1a5dcc20b91 Reviewed-by: Jukka Jokiniva <jukka.jokiniva@qt.io>
author: Daniel Smith <daniel.smith@qt.io> 2025-10-17 12:03:10 +0200
committer: Daniel Smith <daniel.smith@qt.io> 2025-10-28 10:37:32 +0000
commit: 9c93a00b2b4e3f9d780981861c163b2af32ae2e7 (patch)
tree: fe98c0237a15040324d4d6d856bb688264b67a26
parent: 59e122cf357930be17764d3f39c7baad5b6ab7cf (diff)
1 files changed, 55 insertions, 32 deletions
diff --git a/static/qt-workflow-ui.js b/static/qt-workflow-ui.js
index 52a8de3..a1c8687 100644
--- a/static/qt-workflow-ui.js
+++ b/static/qt-workflow-ui.js
@@ -43,10 +43,12 @@ Gerrit.install(plugin => {
                         top: 50%;
                         transform: translate(-50%, -50%);
                         display: flex;
-                        border-radius: 4px;
-                        border: 0px;
-                        padding: 16px;
-                        box-shadow: 0px 4px 4px 0px rgb(60 64 67 / 30%), 0px 8px 12px 6px rgb(60 64 67 / 15%);
+                        border-radius: var(--border-radius);
+                        border: 1px solid var(--border-color);
+                        padding: var(--spacing-xl);
+                        box-shadow: var(--elevation-level-3);
+                        background-color: var(--dialog-background-color);
+                        color: var(--primary-text-color);
                         position: absolute;
                     }
                     .overflow-container {
@@ -66,13 +68,13 @@ Gerrit.install(plugin => {
                     }
                     .footer-buttons {
                         display: flex;
-                        gap: 4px;
+                        gap: var(--spacing-s);
                     }
                     paper-button {
-                        color: #1565c0
+                        color: var(--primary-button-background-color);
                     }
                     paper-button:hover {
-                        background: #00000016;
+                        background: var(--hover-background-color);
                     }
                     #commentdialog {
                         position: fixed;
@@ -81,15 +83,19 @@ Gerrit.install(plugin => {
                         font-size: var(--font-size-mono);
                         font-family: var(--monospace-font-family);
                         border: 1px solid var(--border-color);
-                        border-radius: 4px;
+                        border-radius: var(--border-radius);
                         margin-top: var(--spacing-s);
-                        padding: 8px;
-                        font-size: 14px;
+                        padding: var(--spacing-m);
+                        background-color: var(--view-background-color);
+                        color: var(--primary-text-color);
                         min-width: 30em;
                         min-height: 4em;
                         outline: none;
                         resize: vertical;
                     }
+                    #CommentInput:focus {
+                        border-color: var(--input-focus-border-color);
+                    }
                     label {
                         white-space: nowrap;
                         color: var(--deemphasized-text-color);
@@ -101,7 +107,9 @@ Gerrit.install(plugin => {
                         margin-block-end: 1em;
                     }
                     .dialog-title {
-                        font-size: 16px;
+                        font-size: var(--font-size-h3);
+                        font-weight: var(--font-weight-bold);
+                        color: var(--primary-text-color);
                         margin-bottom: var(--spacing-m);
                     }
                     kbd {
@@ -129,8 +137,8 @@ Gerrit.install(plugin => {
                                 <kbd>Ctrl+Enter</kbd> to confirm
                             </div>
                             <div class="footer-buttons">
-                                <paper-button id="confirmBtn" value="default">Confirm</paper-button>
                                 <paper-button id="cancelBtn" value="default">Cancel</paper-button>
+                                <paper-button id="confirmBtn" value="default">Confirm</paper-button>
                             </div>
                         </div>
                     </form>
@@ -260,10 +268,12 @@ Gerrit.install(plugin => {
                         top: 50%;
                         transform: translate(-50%, -50%);
                         display: flex;
-                        border-radius: 4px;
-                        border: 0px;
-                        padding: 16px;
-                        box-shadow: 0px 4px 4px 0px rgb(60 64 67 / 30%), 0px 8px 12px 6px rgb(60 64 67 / 15%);
+                        border-radius: var(--border-radius);
+                        border: 1px solid var(--border-color);
+                        padding: var(--spacing-xl);
+                        box-shadow: var(--elevation-level-3);
+                        background-color: var(--dialog-background-color);
+                        color: var(--primary-text-color);
                         position: absolute;
                     }
                     .overflow-container {
@@ -283,24 +293,27 @@ Gerrit.install(plugin => {
                     }
                     .footer-buttons {
                         display: flex;
-                        gap: 4px;
+                        gap: var(--spacing-s);
                     }
                     paper-button {
-                        color: #1565c0
+                        color: var(--primary-button-background-color);
                     }
                     paper-button:hover {
-                        background: #00000016;
+                        background: var(--hover-background-color);
                     }
                     select {
-                        color: rgb(33, 33, 33);
-                        font-family: var(--font-family, inherit);
-                        font-size: 14px;
-                        border-radius: 4px;
-                        border-color: rgb(218, 220, 224);
-                        background-color: rgb(248, 249, 250);
-                        padding: 4px;
+                        color: var(--primary-text-color);
+                        font-family: var(--font-family);
+                        font-size: var(--font-size-normal);
+                        border-radius: var(--border-radius);
+                        border: 1px solid var(--border-color);
+                        background-color: var(--background-color-secondary);
+                        padding: var(--spacing-s);
                         outline: none;
                     }
+                    select:focus {
+                        border-color: var(--input-focus-border-color);
+                    }
                     .input-body[hidden] {
                         display: none;
                     }
@@ -314,13 +327,17 @@ Gerrit.install(plugin => {
                         font-size: var(--font-size-mono);
                         font-family: var(--monospace-font-family);
                         border: 1px solid var(--border-color);
-                        border-radius: 4px;
+                        border-radius: var(--border-radius);
                         margin-top: var(--spacing-s);
-                        padding: 4px;
-                        font-size: 14px;
+                        padding: var(--spacing-m);
+                        background-color: var(--view-background-color);
+                        color: var(--primary-text-color);
                         min-width: 30em;
                         outline: none;
                     }
+                    #PlatformsInput:focus {
+                        border-color: var(--input-focus-border-color);
+                    }
                     label {
                         white-space: nowrap;
                         color: var(--deemphasized-text-color);
@@ -331,6 +348,12 @@ Gerrit.install(plugin => {
                         margin-block-start: 1em;
                         margin-block-end: 1em;
                     }
+                    .dialog-title {
+                        font-size: var(--font-size-h3);
+                        font-weight: var(--font-weight-bold);
+                        color: var(--primary-text-color);
+                        margin-bottom: var(--spacing-m);
+                    }
                     #BuildOnlyCheckBox, #CherrypickCheckBox{
                         margin: 3px;
                     }
@@ -348,12 +371,12 @@ Gerrit.install(plugin => {
                     <dialog class="main">
                     <form is="iron-form" id="precheckForm">
                         <div class="overflow-container">
-                            <div style="font-size: 16px;">Precheck</div>
+                            <div class="dialog-title">Precheck</div>
                             <div><p class="paragraph">Select the precheck type. Default will run targets from precheck.yaml, equal to full if yaml not found.
                                 Full will run all targets. Custom will allow manual selection of the targets.</p></div>
                             <div class="input-body">
                                 <p class="paragraph"><label>Precheck type:
-                                <select id="typeSelect" style="margin-left: 4px;">
+                                <select id="typeSelect" style="margin-left: var(--spacing-s);">
                                     <option value="default" title="Runs targets from precheck.yaml (lower coverage but faster)">Default</option>
                                     <option value="full" title="Runs all targets (high coverage but slower)">Full</option>
                                     <option value="downstream" title="Runs a qt5 precheck with this change as dependency">Downstream qt5</option>
@@ -386,8 +409,8 @@ Gerrit.install(plugin => {
                                 <kbd>Ctrl+Enter</kbd> to confirm
                             </div>
                             <div class="footer-buttons">
-                                <paper-button id="confirmBtn" value="default">Confirm</paper-button>
                                 <paper-button id="cancelBtn" value="default">Cancel</paper-button>
+                                <paper-button id="confirmBtn" value="default">Confirm</paper-button>
                             </div>
                         </div>
                     </form>
author	Daniel Smith <daniel.smith@qt.io>	2025-10-17 12:03:10 +0200
committer	Daniel Smith <daniel.smith@qt.io>	2025-10-28 10:37:32 +0000
commit	9c93a00b2b4e3f9d780981861c163b2af32ae2e7 (patch)
tree	fe98c0237a15040324d4d6d856bb688264b67a26
parent	59e122cf357930be17764d3f39c7baad5b6ab7cf (diff)