Adding help icons and improving darkmode css. (#3070)

3 files changed, 39 insertions, 5 deletions

diff --git a/locales/en/messages.json b/locales/en/messages.json
index 2b1aa69c..36691246 100644
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -6725,5 +6725,20 @@
     },
     "firmwareFlasherConfigurationFile": {
         "message": "Configuration Filename:"
+    },
+    "firmwareFlasherRadioProtocolDescription": {
+        "message": "Select the radio protocols you would like included in this build. Note this is a drop down, and multiple items maybe selected."
+    },
+    "firmwareFlasherTelemetryProtocolDescription": {
+        "message": "Select the telemetry protocols you would like included in this build. Note this is a drop down, and multiple items maybe selected. There are also some telemetry protocols that will be enabled, regardless of your selection here based on the radio protocol selected, e.g. CRSF."
+    },
+    "firmwareFlasherOptionsDescription": {
+        "message": "Select the generic options you would like included in this build. Note this is a drop down, and multiple items maybe selected. Such items as fixes, e.g. AKK VTX, are included here."
+    },
+    "firmwareFlasherMotorProtocolDescription": {
+        "message": "Select the motor (ESC) protocols you would like included in this build. Note this is a drop down, and multiple items maybe selected."
+    },
+    "firmwareFlasherBranchDescription": {
+        "message": "Especially useful for developers, you can select a merged PR, specify a commit sha, or specify a 'yet to be merged' PR by typing in: pull/{PR number}/head ."
     }
 }
diff --git a/src/css/dark-theme.less b/src/css/dark-theme.less
index f9b98b34..4dd8c31d 100644
--- a/src/css/dark-theme.less
+++ b/src/css/dark-theme.less
@@ -315,6 +315,20 @@ button {
 	}
 }
 .tab-firmware_flasher {
+	.build_configuration {
+		.select2 {
+			color: #424242;
+			.selection {
+				.select2-selection {
+					background-color: #575757;
+				}
+			}
+		}
+		select {
+			background-color: #3a3a3a;
+			color: white;
+		}
+	}
 	.options {
 		select {
 			background-color: #3a3a3a;
diff --git a/src/tabs/firmware_flasher.html b/src/tabs/firmware_flasher.html
index d03d2f99..e15fcc53 100644
--- a/src/tabs/firmware_flasher.html
+++ b/src/tabs/firmware_flasher.html
@@ -155,15 +155,17 @@
                     <div style="width: 49%; float: left;">
                         <strong i18n="firmwareFlasherBuildRadioProtocols"></strong>
                         <div id="radioProtocolInfo">
-                            <select id="radioProtocols" name="radioProtocols" multiple="multiple" class="select2" style="width: 95%; color: #424242">
+                            <select id="radioProtocols" name="radioProtocols" multiple="multiple" class="select2" style="width: 95%">
                             </select>
+                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherRadioProtocolDescription"></div>
                         </div>
                     </div>
                     <div style="width: 49%; float: right;">
                         <strong i18n="firmwareFlasherBuildTelemetryProtocols"></strong>
                         <div id="telemetryProtocolInfo">
-                            <select id="telemetryProtocols" name="telemetryProtocols" multiple="multiple" class="select2" style="width: 95%; color: #424242">
+                            <select id="telemetryProtocols" name="telemetryProtocols" multiple="multiple" class="select2" style="width: 95%">
                             </select>
+                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherTelemetryProtocolDescription"></div>
                         </div>
                     </div>
                 </div>
@@ -173,15 +175,17 @@
                     <div style="width: 49%; float: left;">
                         <strong i18n="firmwareFlasherBuildOptions"></strong>
                         <div id="optionsInfo">
-                            <select id="options" name="options" multiple="multiple" class="select2" style="width: 95%; color: #424242">
+                            <select id="options" name="options" multiple="multiple" class="select2" style="width: 95%">
                             </select>
+                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherOptionsDescription"></div>
                         </div>
                     </div>
                     <div style="width: 49%; float: right;">
                         <strong i18n="firmwareFlasherBuildMotorProtocols"></strong>
                         <div id="motorProtocolInfo">
-                            <select id="motorProtocols" name="motorProtocols" multiple="multiple" class="select2" style="width: 95%; color: #424242">
+                            <select id="motorProtocols" name="motorProtocols" multiple="multiple" class="select2" style="width: 95%">
                             </select>
+                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherMotorProtocolDescription"></div>
                         </div>
                     </div>
                 </div>
@@ -191,8 +195,9 @@
                     <div style="width: 49%; float: left;">
                         <strong i18n="firmwareFlasherBranch"></strong>
                         <div id="branchInfo">
-                            <select id="commits" name="commits" class="select2" style="width: 95%; color: #424242">
+                            <select id="commits" name="commits" class="select2" style="width: 95%">
                             </select>
+                            <div class="helpicon cf_tip_wide" i18n_title="firmwareFlasherBranchDescription"></div>
                         </div>
                     </div>
                 </div>