Improve About Qt for Device Creation demo

Change-Id: Iac874151028ede2f9114e317cb6f60fd16387445
Task-number: QTEE-997
Reviewed-by: Katja Marttila <katja.marttila@theqtcompany.com>

8 files changed, 55 insertions, 167 deletions

diff --git a/basicsuite/about-b2qt/AboutBoot2Qt.qml b/basicsuite/about-b2qt/AboutBoot2Qt.qml
index 7033bb7..8fb0615 100644
--- a/basicsuite/about-b2qt/AboutBoot2Qt.qml
+++ b/basicsuite/about-b2qt/AboutBoot2Qt.qml
@@ -48,16 +48,15 @@ Column {
 
     spacing: engine.smallFontSize() * 2
 
-    property color qtlightgreen: '#80c342'
-    property color qtmediumgreen: '#328930'
-    property color qtdarkgreen: '#006325'
-    property color qtdarkblue: '#14148c'
-    property color qtlightblue: '#14aaff'
-    property color qtpurple: '#ae32a0'
-    property color qtred: '#b40000'
-
-    ColouredTitle {
-        text: "MEET Qt FOR DEVICE CREATION"
+    property color grayStroke: '#929495'
+    property color grayText: '#585a5c'
+    property color grayBackground: '#d3d3d3'
+    property color greenStroke: '#80c342'
+    property color greenText: '#5caa15'
+    property color greenBackground: '#5caa15'
+
+    Title {
+        text: "Meet Qt for Device Creation"
     }
 
     ContentText {
@@ -78,8 +77,8 @@ Column {
         anchors.horizontalCenter: parent.horizontalCenter
         spacing: 10
 
-        Box{ text: "Cross-Platform Qt Libraries"; width: parent.width; accentColor: qtlightgreen }
-        Box{ text: "Value-Add Components"; width: parent.width; accentColor: qtlightgreen }
+        Box{ text: "Cross-Platform Qt Libraries"; width: parent.width;  }
+        Box{ text: "Value-Add Components"; width: parent.width;  }
 
         Row {
             id: row1
@@ -87,7 +86,7 @@ Column {
             width: parent.width
 
             Box{ text: "Complete\nDevelopment Environment\nwith Qt Creator IDE";
-                width: (row1.width - row1.spacing) / 2; height: column1.height; accentColor: qtmediumgreen }
+                width: (row1.width - row1.spacing) / 2; height: column1.height; }
 
             Column {
                 id: column1
@@ -95,14 +94,14 @@ Column {
                 spacing: row1.spacing
 
 
-                Box{ text: "Boot to Qt\nSoftware Stack\nfor HW"; accentColor: qtdarkblue; height: b2.height * 3 }
-                Box{ id: b2; text: "Build-Your-Own-Stack Tooling"; accentColor: qtdarkblue; }
+                Box{ text: "Boot to Qt\nSoftware Stack\nfor HW"; borderColor: root.grayStroke; backgroundColor: root.grayBackground; textColor: root.grayText; height: b2.height * 3 }
+                Box{ id: b2; text: "Build-Your-Own-Stack Tooling"; borderColor: root.grayStroke; backgroundColor: root.grayBackground; textColor: root.grayText; }
             }
         }
     } // end overview picture
 
-    ColouredTitle {
-        text: "POWER OF CROSS-PLATFORM Qt"
+    Title {
+        text: "Power of Cross-Platform Qt"
     }
 
     ContentText {
@@ -115,8 +114,9 @@ Column {
                          natively to desktop and mobile OS targets as well.</p>'
     }
 
-    HighlightText {
+    Text {
         text: "Velvet-Like Native UIs, HTML5 or Both!"
+        font.pixelSize: engine.fontSize()
     }
 
     ContentText {
@@ -128,12 +128,13 @@ Column {
             of both worlds!</p>'
     }
 
-    ColouredTitle {
-        text: "SHORTER TIME-TO-MARKET"
+    Title {
+        text: "Shorter Time-to-Market"
     }
 
-    HighlightText {
+    Text {
         text: "Full Embedded Development Environment"
+        font.pixelSize: engine.fontSize()
     }
 
     ContentText {
@@ -147,8 +148,9 @@ Column {
     }
 
 
-    HighlightText {
+    Text {
         text: "Boot to Qt Software Stack -\nEmbedded Prototyping Couldn't Get Any Simpler!"
+        font.pixelSize: engine.fontSize()
     }
 
     Row {
@@ -171,17 +173,18 @@ Column {
         Column {
             spacing: 5
             width: ( parent.width - parent.spacing ) / 2
-            Box { text: "Application"; accentColor: qtpurple }
-            Box { text: "Qt Framework"; accentColor: qtlightgreen }
-            Box { text: "Linux Baselayer"; accentColor: qtdarkblue }
-            Box { text: "Embedded Hardware"; accentColor: qtdarkblue }
+            Box { text: "Application"; }
+            Box { text: "Qt Framework"; }
+            Box { text: "Linux Baselayer"; }
+            Box { text: "Embedded Hardware"; }
         }
 
 
     }
 
-    HighlightText {
+    Text {
         text: "Value-Add Components - No Need to Re-Invent the Wheel!"
+        font.pixelSize: engine.fontSize()
     }
     ContentText {
         width: parent.width
@@ -201,21 +204,18 @@ Column {
             spacing: 10
             width: parent.width * 0.4
 
-            HighlightText {
-                color: qtlightgreen
+            Text {
                 horizontalAlignment: Text.AlignHCenter
                 font.pixelSize: engine.smallFontSize()
                 text: "Virtual Keyboard"
             }
-            HighlightText {
-                color: qtlightgreen
+            Text {
                 horizontalAlignment: Text.AlignHCenter
                 font.pixelSize: engine.smallFontSize()
 
                 text: "Dynamic and Static Charting"
             }
-            HighlightText {
-                color: qtlightgreen
+            Text {
                 horizontalAlignment: Text.AlignHCenter
                 font.pixelSize: engine.smallFontSize()
 
@@ -225,20 +225,17 @@ Column {
         Column {
             spacing: 10
             width: parent.width * 0.4
-            HighlightText {
-                color: qtlightgreen
+            Text {
                 horizontalAlignment: Text.AlignHCenter
                 font.pixelSize: engine.smallFontSize()
                 text: "3D Data Visualization"
             }
-            HighlightText {
-                color: qtlightgreen
+            Text {
                 horizontalAlignment: Text.AlignHCenter
                 font.pixelSize: engine.smallFontSize()
                 text: "Qt Quick Compiler"
             }
-            HighlightText {
-                color: qtlightgreen
+            Text {
                 horizontalAlignment: Text.AlignHCenter
                 font.pixelSize: engine.smallFontSize()
                 text: "Additional Tooling"
@@ -246,8 +243,8 @@ Column {
         }
     } // end of "grid" layout
 
-    ColouredTitle {
-        text: "TRUSTED TECHNOLOGY PARTNER"
+    Title {
+        text: "Trusted Technology Partner"
     }
     ContentText {
         width: parent.width
@@ -261,8 +258,8 @@ Column {
                to help you pass all obstacles and reach your markets faster with outstanding quality.</p>'
     }
 
-    ColouredTitle {
-        text: "GETTING STARTED WITH DEVELOPMENT"
+    Title {
+        text: "Getting Started With Development"
     }
     ContentText {
         width: parent.width
@@ -270,10 +267,11 @@ Column {
                 free evaluation version of Qt for Device Creation with the Boot to Qt images
                 for common developer boards from</p>'
     }
-    HighlightText {
-        text: "http://www.qt.io"
-        color: qtpurple
-        font.bold: true
+    Text {
+        text: "Visit Qt.io"
+        width: parent.width
+        color: root.greenText
+        font.pixelSize: engine.titleFontSize()
         horizontalAlignment: Text.AlignHCenter
     }
     ContentText {
diff --git a/basicsuite/about-b2qt/Box.qml b/basicsuite/about-b2qt/Box.qml
index d86e62e..6b90107 100644
--- a/basicsuite/about-b2qt/Box.qml
+++ b/basicsuite/about-b2qt/Box.qml
@@ -41,29 +41,27 @@
 import QtQuick 2.0
 
 Rectangle {
-    id: root
+    id: box
 
     width: parent.width
     height: label.font.pixelSize * 3
 
-    radius: 4
-
     antialiasing: true
 
     property alias text: label.text;
 
-    property color accentColor: "palegreen"
+    property color borderColor: '#80c342'
+    property color backgroundColor: "transparent"
+    property color textColor: '#5caa15'
 
-    gradient: Gradient {
-        GradientStop { position: 0; color: root.accentColor; }
-        GradientStop { position: 1; color: Qt.darker(Qt.darker(root.accentColor)); }
-    }
+    color: backgroundColor
+    border.color: borderColor
+    border.width: 2
 
     Text {
         id: label
         font.pixelSize: engine.smallFontSize()
-        font.bold: true;
-        color: "white"
+        color: textColor
         anchors.centerIn: parent
         horizontalAlignment: Text.AlignHCenter
     }
diff --git a/basicsuite/about-b2qt/ColouredTitle.qml b/basicsuite/about-b2qt/ColouredTitle.qml
deleted file mode 100644
index dcd2ebf..0000000
--- a/basicsuite/about-b2qt/ColouredTitle.qml
+++ /dev/null
@@ -1,53 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
-** Contact: For any questions to Digia, please use the contact form at
-** http://www.qt.io
-**
-** This file is part of the examples of the Qt Enterprise Embedded.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-
-Text {
-
-    property color qtlightgreen: '#80c342'
-
-    width: parent.width
-    horizontalAlignment: Text.AlignHCenter
-    wrapMode: Text.WordWrap
-
-    font.pixelSize: engine.titleFontSize()
-    color: qtlightgreen
-}
diff --git a/basicsuite/about-b2qt/HighlightText.qml b/basicsuite/about-b2qt/HighlightText.qml
deleted file mode 100644
index c8620dc..0000000
--- a/basicsuite/about-b2qt/HighlightText.qml
+++ /dev/null
@@ -1,53 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
-** Contact: For any questions to Digia, please use the contact form at
-** http://www.qt.io
-**
-** This file is part of the examples of the Qt Enterprise Embedded.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-
-Text {
-
-    property color qtlightblue: '#14aaff'
-
-    width: parent.width
-    horizontalAlignment: Text.AlignLeft
-    wrapMode: Text.WordWrap
-    font.pixelSize: engine.fontSize()
-    font.bold: true
-    color: qtlightblue
-}
diff --git a/basicsuite/about-b2qt/Title.qml b/basicsuite/about-b2qt/Title.qml
index 4a63f69..2f34331 100644
--- a/basicsuite/about-b2qt/Title.qml
+++ b/basicsuite/about-b2qt/Title.qml
@@ -42,7 +42,5 @@ import QtQuick 2.0
 
 Text {
     font.pixelSize: engine.titleFontSize()
-    font.italic: true
-    color: "white"
-    anchors.horizontalCenter: parent.horizontalCenter
+    color: "black"
 }
diff --git a/basicsuite/about-b2qt/main.qml b/basicsuite/about-b2qt/main.qml
index 8f5296b..e0d86ac 100644
--- a/basicsuite/about-b2qt/main.qml
+++ b/basicsuite/about-b2qt/main.qml
@@ -117,7 +117,7 @@ Item {
 
         ImageParticle {
             id: imageParticle
-            source: "particle.png"
+            source: "particle_star2.png"
             color: "#80c342"
             alpha: 0
             colorVariation: 0.3
diff --git a/basicsuite/about-b2qt/particle.png b/basicsuite/about-b2qt/particle.png
deleted file mode 100644
index 5c83896..0000000
--- a/basicsuite/about-b2qt/particle.png
+++ /dev/null
diff --git a/basicsuite/about-b2qt/particle_star2.png b/basicsuite/about-b2qt/particle_star2.png
new file mode 100644
index 0000000..bb88c18
--- /dev/null
+++ b/basicsuite/about-b2qt/particle_star2.png