Improve red button focus colour

- All of our red buttons were ImButton with the colours overridden at the
  use site.  Instead make an ImButtonRed which defines these colours in
  one place.
- Previously the red buttons had focus indicated by the text colour
  changing from white to blue.  This was quite hard to see, instead
  change the button colour to blue (as is done for the white buttons).
  A darker shade of blue is used so that there is still good contrast
  with the white text.
- Update the reds (buttons and main screen background) with the
  branding-approved red: the official colour palette says Pi Red is
  #cd2355

src/MsgPopup.qml

@@ -94,47 +94,39 @@ Popup {
             Layout.bottomMargin: 10
             spacing: 20
 
-            ImButton {
+            ImButtonRed {
                 text: qsTr("NO")
                 onClicked: {
                     msgpopup.close()
                     msgpopup.no()
                 }
                 visible: msgpopup.noButton
-                Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
-                Material.background: "#c51a4a"
             }
 
-            ImButton {
+            ImButtonRed {
                 text: qsTr("YES")
                 onClicked: {
                     msgpopup.close()
                     msgpopup.yes()
                 }
                 visible: msgpopup.yesButton
-                Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
-                Material.background: "#c51a4a"
             }
 
-            ImButton {
+            ImButtonRed {
                 text: qsTr("CONTINUE")
                 onClicked: {
                     msgpopup.close()
                 }
                 visible: msgpopup.continueButton
-                Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
-                Material.background: "#c51a4a"
             }
 
-            ImButton {
+            ImButtonRed {
                 text: qsTr("QUIT")
                 onClicked: {
                     Qt.quit()
                 }
                 font.family: roboto.name
                 visible: msgpopup.quitButton
-                Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
-                Material.background: "#c51a4a"
             }
 
             Text { text: " " }

src/OptionsPopup.qml

@@ -378,7 +378,7 @@ Window {
             Layout.bottomMargin: 10
             spacing: 20
 
-            ImButton {
+            ImButtonRed {
                 text: qsTr("SAVE")
                 onClicked: {
                     if (chkSetUser.checked && fieldUserPassword.text.length == 0)
@@ -419,8 +419,6 @@ Window {
                     saveSettings()
                     popup.close()
                 }
-                Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
-                Material.background: "#c51a4a"
             }
 
             Text { text: " " }
@@ -852,7 +850,7 @@ Window {
         } else {
             fieldKeyboardLayout.currentIndex = fieldKeyboardLayout.find("us")
         }
-        
+
         chkSetUser.checked = false
         chkSSH.checked = false
         chkLocale.checked = false

src/UseSavedSettingsPopup.qml

@@ -98,7 +98,7 @@ Popup {
             spacing: 20
             id: buttons
 
-            ImButton {
+            ImButtonRed {
                 text: qsTr("EDIT SETTINGS")
                 onClicked: {
                     // Don't close this dialog when "edit settings" is
@@ -108,42 +108,34 @@ Popup {
                     // customisation or not.
                     msgpopup.editSettings()
                 }
-                Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
-                Material.background: "#c51a4a"
             }
 
-            ImButton {
+            ImButtonRed {
                 id: noAndClearButton
                 text: qsTr("NO, CLEAR SETTINGS")
                 onClicked: {
                     msgpopup.close()
                     msgpopup.noClearSettings()
                 }
-                Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
-                Material.background: "#c51a4a"
                 enabled: hasSavedSettings
             }
 
-            ImButton {
+            ImButtonRed {
                 id: yesButton
                 text: qsTr("YES")
                 onClicked: {
                     msgpopup.close()
                     msgpopup.yes()
                 }
-                Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
-                Material.background: "#c51a4a"
                 enabled: hasSavedSettings
             }
 
-            ImButton {
+            ImButtonRed {
                 text: qsTr("NO")
                 onClicked: {
                     msgpopup.close()
                     msgpopup.no()
                 }
-                Material.foreground: activeFocus ? "#d1dcfb" : "#ffffff"
-                Material.background: "#c51a4a"
             }
 
             Text { text: " " }

src/main.qml

@@ -103,7 +103,7 @@ ApplicationWindow {
         }
 
         Rectangle {
-            color: "#c31c4a"
+            color: "#cd2355"
             implicitWidth: window.width
             implicitHeight: window.height * (1 - 1/4)
 

src/qml.qrc

@@ -34,6 +34,7 @@
         <file>icons/logo_stacked_imager.png</file>
         <file>icons/logo_sxs_imager.png</file>
         <file>qmlcomponents/ImButton.qml</file>
+        <file>qmlcomponents/ImButtonRed.qml</file>
         <file>qmlcomponents/ImCheckBox.qml</file>
         <file>qmlcomponents/ImRadioButton.qml</file>
         <file>icons/cat_digital_signage.png</file>

src/qmlcomponents/ImButton.qml

@@ -11,7 +11,7 @@ import QtQuick.Controls.Material 2.2
 Button {
     font.family: roboto.name
     Material.background: activeFocus ? "#d1dcfb" : "#ffffff"
-    Material.foreground: "#c51a4a"
+    Material.foreground: "#cd2355"
     Accessible.onPressAction: clicked()
     Keys.onEnterPressed: clicked()
     Keys.onReturnPressed: clicked()

src/qmlcomponents/ImButtonRed.qml

@@ -0,0 +1,14 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * Copyright (C) 2022 Raspberry Pi Ltd
+ */
+
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.0
+import QtQuick.Controls.Material 2.2
+
+ImButton {
+    Material.background: activeFocus ? "#32a0d7" : "#cd2355"
+    Material.foreground: "#ffffff"
+}