SatelliteInfo example: apply the design to existing features

This commit introduces the following changes:
* Create a Theme singleton object with all the necessary colors, and
  use it to style the application.
* Bundle the Titillium Web Regular and Semi-Bold font and use it as
  an application font, as required by the design.
* Explicitly import QuickControls.Basic style, and use the new Theme
  to customize the colors.
* Rework the SkyView according to the design, make individual
  satellite items selectable and create a popup with the satellite
  information.
* Rework the RSSI View according to the design, add a scrollable
  list of all satellites on top of it.

This commit DOES NOT implement the satellite table (Table View tab).
This will be done in a follow-up commit to simplify the review
process.

Task-number: QTBUG-114709
Pick-to: 6.6
Change-Id: I9cf82078f54418a9d57b20bf397aeb840722ba37
Reviewed-by: Dennis Oberst <dennis.oberst@qt.io>
Reviewed-by: Juha Vuolle <juha.vuolle@qt.io>

1 files changed, 11 insertions, 7 deletions

diff --git a/examples/positioning/satelliteinfo/Button.qml b/examples/positioning/satelliteinfo/Button.qml
index c62b3fd0..19f6a771 100644
--- a/examples/positioning/satelliteinfo/Button.qml
+++ b/examples/positioning/satelliteinfo/Button.qml
@@ -2,25 +2,29 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 import QtQuick
-import QtQuick.Controls
+import QtQuick.Controls.Basic
 
 ItemDelegate {
     id: root
 
-    property alias bold: root.font.bold
+    property bool redHover: false
+    readonly property color pressedColor: root.redHover ? Theme.buttonRedTextPressedColor
+                                                        : Theme.buttonTextPressedColor
 
     contentItem: Text {
         text: root.text
+        font.pixelSize: Theme.mediumFontSize
+        font.weight: Theme.fontDefaultWeight
+        color: root.pressed ? root.pressedColor : Theme.buttonTextColor
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
-        font: root.font
     }
     background: Rectangle {
         border {
-            width: 1
-            color: "black"
+            width: 2
+            color: root.pressed ? root.pressedColor : Theme.buttonTextColor
         }
-        radius: 5
-        color: root.pressed ? "lightGray" : "white"
+        radius: 10
+        color: Theme.buttonBackgroundColor
     }
 }