Merge pull request #2421 from haslinghuis/fix-dark-descriptions

Fix darkmode on motor + servo tab + messages

locales/en/messages.json

@@ -533,7 +533,7 @@
         "message": "<strong>the version of configurator that you are using ($3) is older than the firmware you are using ($4)</strong>.<br>$t(configuratorUpdateHelp.message)"
     },
     "reportProblemsDialogMOTOR_PROTOCOL_DISABLED": {
-        "message": "<strong>there is no motor output protocol selected</strong>.<br>Please select a motor output protocol appropriate for your ESCs in '$t(configurationEscFeatures.message)' on the '$t(tabConfiguration.message)' tab.<br>$t(escProtocolDisabledMessage.message)"
+        "message": "<strong>there is no motor output protocol selected</strong>.<br>Please select a motor output protocol appropriate for your ESCs in '$t(configurationEscFeatures.message)' on the '$t(tabMotorTesting.message)' tab.<br>$t(escProtocolDisabledMessage.message)"
     },
     "reportProblemsDialogACC_NEEDS_CALIBRATION": {
         "message": "<strong>the accelerometer is enabled but it is not calibrated</strong>.<br>If you plan to use the accelerometer, please follow the instructions for '$t(initialSetupButtonCalibrateAccel.message)' on the '$t(tabSetup.message)' tab. If any function that requires the accelerometer (auto level modes, GPS rescue, ...) is enabled, arming of the craft will be disabled until the accelerometer has been calibrated.<br>If you are not planning on using the accelerometer it is recommended that you disable it in '$t(configurationSystem.message)' on the '$t(tabConfiguration.message)' tab."
@@ -2608,7 +2608,7 @@
         "message": "<strong>I understand the risks</strong>,<br />all propellers are removed."
     },
     "escDshotDirectionDialog-InformationNotice": {
-        "message": "<strong>Information notice</strong><br />To change the motor directions, the battery must be plugged in and the correct ESC protocol must be set up in the $t(tabConfiguration.message) tab. Note that not all Dshot ESCs will work with this dialog. Check your ESC firmware."
+        "message": "<strong>Information notice</strong><br />To change the motor directions, the battery must be plugged in and the correct ESC protocol must be set up in the $t(tabMotorTesting.message) tab. Note that not all Dshot ESCs will work with this dialog. Check your ESC firmware."
     },
     "escDshotDirectionDialog-NormalInformationNotice": {
         "message": "Set motor spin direction by selecting and spinning each motor individually."
@@ -2647,10 +2647,10 @@
         "message": "Motors will spin when setting the direction!"
     },
     "escDshotDirectionDialog-WrongProtocolText": {
-        "message": "Feature works with DSHOT ESCs only.<br />Verify that your ESC (electric speed controller) supports DSHOT protocol and change it on $t(tabConfiguration.message) tab."
+        "message": "Feature works with DSHOT ESCs only.<br />Verify that your ESC (electric speed controller) supports DSHOT protocol and change it on $t(tabMotorTesting.message) tab."
     },
     "escDshotDirectionDialog-WrongMixerText": {
-        "message": "Number of motors is 0.<br />Verify the current Mixer on $t(tabConfiguration.message) tab or setup a custom one through CLI. Refer to this <a href=\"https://github.com/betaflight/betaflight/blob/master/docs/Mixer.md\" target=\"_blank\" rel=\"noopener noreferrer\">Wiki page</a>."
+        "message": "Number of motors is 0.<br />Verify the current Mixer on $t(tabMotorTesting.message) tab or setup a custom one through CLI. Refer to this <a href=\"https://github.com/betaflight/betaflight/blob/master/docs/Mixer.md\" target=\"_blank\" rel=\"noopener noreferrer\">Wiki page</a>."
     },
     "escDshotDirectionDialog-WrongFirmwareText": {
         "message": "Update the firmware.<br /> Make sure you are using the latest firmware: Betaflight 4.3 or newer."
@@ -3741,7 +3741,7 @@
         "description": "Header text for the RPM Filter group"
     },
     "pidTuningRpmFilterHelp": {
-        "message": "RPM filtering is a bank of notch filters on gyro which use the RPM telemetry data to remove motor noise with surgical precision.<br /><br /><b><span class=\"message-positive\">IMPORTANT</span>: The ESC must support the Bidirectional DShot protocol and the value of the $t(configurationMotorPoles.message) in the $t(tabConfiguration.message) tab must be correct for this filter to work.</b>",
+        "message": "RPM filtering is a bank of notch filters on gyro which use the RPM telemetry data to remove motor noise with surgical precision.<br /><br /><b><span class=\"message-positive\">IMPORTANT</span>: The ESC must support the Bidirectional DShot protocol and the value of the $t(configurationMotorPoles.message) in the $t(tabMotorTesting.message) tab must be correct for this filter to work.</b>",
         "description": "Header text for the RPM Filter group"
     },
     "pidTuningRpmHarmonics": {

src/css/dark-theme.css

@@ -257,10 +257,6 @@ button {
 
 /* CONFIGURATION TAB */
 
-.tab-configuration .mixerPreview {
-    background-color: #393b3a;
-}
-
 .tab-configuration .gui_box span {
     color: white;
 }
@@ -433,6 +429,16 @@ progress[value]::-webkit-progress-bar {
 
 /* MOTORS TAB */
 
+.tab-motors .gui_box span {
+    color: white;
+}
+
+.tab-motors input,
+.tab-motors select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
 .tab-motors .plot_control {
     background-color: #393b3a;
 }
@@ -819,6 +825,19 @@ progress[value]::-webkit-progress-bar {
     color: white;
 }
 
+.tab-servos .servoblock {
+    background-color: #393b3a;
+    color: white;
+}
+
+.tab-servos .m-block .label {
+    color: white;
+}
+
+.tab-servos .m-block .meter-bar {
+    background-color: #393b3a;
+}
+
 
 /* SETUP TAB */
 

src/css/tabs/motors.css

@@ -22,6 +22,7 @@
 .tab-motors table, .tab-motors table th, .tab-motors table td {
     padding: 0;
     text-align: left;
+    border-collapse: collapse;
 }
 
 .tab-motors table th {
@@ -55,8 +56,13 @@
 }
 
 .tab-motors .mixerList {
-    float: left   ;
+    width: 44%;
-    width: 29%;
+}
+
+.tab-motors .mixerPreview img {
+    width: 150px;
+    height: 150px;
+    margin-left: 48px;
 }
 
 .tab-motors .featuresMultiple {
@@ -250,10 +256,6 @@
     width: calc(100% - 160px);
 }
 
-.tab-motors .mixerPreview {
-    float: left;
-}
-
 .tab-motors #dialogMotorOutputReorder-closebtn {
     margin-right: 0px;
     margin-bottom: 0px;
@@ -320,13 +322,6 @@
     flex-grow: 1;
 }
 
-.tab-motors .mixerPreview img {
-    width: 150px;
-    height: 150px;
-    margin-top: 18px;
-    margin-left: 32px;
-}
-
 .tab-motors .tool-buttons {
     float: right;
     margin-bottom: -3%;

src/tabs/motors.html

@@ -21,8 +21,12 @@
                                     <!-- list generated here -->
                                 </select>
                             </div>
-                            <div class="spacer_box mixerPreview">
+                            <div class="grid-row">
-                                <img src="./resources/motor_order/custom.svg" />
+                                <div class="grid-col col6">
+                                    <div class="mixerPreview">
+                                        <img src="./resources/motor_order/custom.svg" alt="Mixer Preview">
+                                    </div>
+                                </div>
                             </div>
                             <div class="spacer_box reverseMotor">
                                 <div class="topBorderLine">