Change overall look like border radius and better font rendering

ScreenPlay.pro

@@ -55,6 +55,7 @@ contains(QT_ARCH, i386) {
 
 DISTFILES += \
     steam_appid.txt \
+    assets/icons/favicon.ico
 
 
 

assets/icons/icon_window.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M9.073,2.606c-0.708,-0.141 -1.438,-0.141 -2.146,0l-0.26,1.467c-0.516,0.175 -0.992,0.45 -1.402,0.809l-1.4,-0.508c-0.476,0.543 -0.841,1.174 -1.073,1.858l1.14,0.959c-0.106,0.534 -0.106,1.084 0,1.618l-1.14,0.959c0.232,0.684 0.597,1.315 1.073,1.858l1.4,-0.508c0.41,0.359 0.886,0.634 1.402,0.809l0.26,1.467c0.708,0.141 1.438,0.141 2.146,0l0.26,-1.467c0.516,-0.175 0.992,-0.45 1.402,-0.809l1.4,0.508c0.476,-0.543 0.841,-1.174 1.073,-1.858l-1.14,-0.959c0.106,-0.534 0.106,-1.084 0,-1.618l1.14,-0.959c-0.232,-0.684 -0.597,-1.315 -1.073,-1.858l-1.4,0.508c-0.41,-0.359 -0.886,-0.634 -1.402,-0.809l-0.26,-1.467Zm-1.073,3.224c1.197,0 2.17,0.973 2.17,2.17c0,1.197 -0.973,2.17 -2.17,2.17c-1.197,0 -2.17,-0.973 -2.17,-2.17c0,-1.197 0.973,-2.17 2.17,-2.17Z" style="fill:#ffab00;"/></svg>

assets/images/Window.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 186 121" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M185.562,119.752c0,0.596 -0.483,1.079 -1.079,1.079l-183.404,0c-0.596,0 -1.079,-0.483 -1.079,-1.079l0,-118.673c0,-0.596 0.483,-1.079 1.079,-1.079l183.404,0c0.596,0 1.079,0.483 1.079,1.079l0,118.673Z" style="fill:#fff;fill-rule:nonzero;"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 310 121" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M310,5c0,-2.76 -2.24,-5 -5,-5l-300,0c-2.76,0 -5,2.24 -5,5l0,116l310,0l0,-116Z" style="fill:#484848;"/></svg>

qml/Components/Monitors.qml

@@ -14,53 +14,129 @@ Item {
 
     }
 
+    onStateChanged: {
+        monitorWrapper.focus = monitors.state == "active" ? true : false
+    }
+
     Rectangle {
-        id:blurParent
+        id:background
-        color: "#80ffffff"
+        color: "#80000000"
         anchors.fill: parent
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: monitors.state = "inactive"
+        }
     }
 
 
     Rectangle {
-        width: 800
+        id:monitorWrapper
+        width: 900
         height: 600
-
+        radius: 6
+        z:99
         anchors.centerIn: parent
+
+        MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+
+            Rectangle {
+                id: rectangle
+                height: 464
+                color: "#dfdfdf"
+                anchors.right: parent.right
+                anchors.rightMargin: 20
+                anchors.left: parent.left
+                anchors.leftMargin: 20
+                anchors.top: parent.top
+                anchors.topMargin: 20
+            }
+        }
     }
 
-
+    DropShadow {
-    FastBlur {
+        anchors.fill: monitorWrapper
-        id:blur
+        radius: 12.0
-        anchors.fill: monitors
+        cached: true
-        source: blurParent
+        samples: 17
-        radius: 64
+        color: "#80000000"
+        source: monitorWrapper
     }
 
+
     states: [
         State {
             name: "active"
 
             PropertyChanges {
                 target: monitors
-                visible: true
+                opacity: 1
+                enabled:true
+            }
+
+
+
+            PropertyChanges {
+                target: monitorWrapper
+                anchors.topMargin: 0
             }
 
             PropertyChanges {
-                target: blur
+                target: background
                 opacity: 1
             }
+
         },
         State {
             name: "inactive"
             PropertyChanges {
                 target: monitors
-                visible: false
+                opacity: 0
+                enabled:false
             }
 
             PropertyChanges {
-                target: blur
+                target: monitorWrapper
+                anchors.topMargin: 50
+            }
+
+            PropertyChanges {
+                target: background
                 opacity: 0
             }
+
+
+        }
+    ]
+
+    transitions: [
+        Transition {
+
+
+            NumberAnimation {
+                target: background
+                property: "opacity"
+                duration: 200
+                easing.type: Easing.InOutQuad
+            }
+
+
+            NumberAnimation {
+                target: monitors
+                property: "opacity"
+                duration: 200
+                easing.type: Easing.InOutQuad
+            }
+
+            NumberAnimation {
+                target: monitorWrapper
+                property: "anchors.topMargin"
+                duration: 200
+
+            }
+
         }
     ]
 

qml/Components/Navigation.qml

@@ -108,6 +108,7 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
             font.pixelSize: 16
             font.family: font_Roboto_Regular.name
+            renderType: Text.NativeRendering
 
             FontLoader{
                 id: font_Roboto_Regular

qml/Components/NavigationItem.qml

@@ -49,6 +49,7 @@ Item {
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.horizontalCenter: parent.horizontalCenter
                 font.family: font_Roboto_Regular.name
+                renderType: Text.NativeRendering
 
                 FontLoader{
                     id: font_Roboto_Regular

qml/Components/ScreenPlayItem.qml

@@ -10,31 +10,41 @@ Item {
     property string screenId: ""
     signal itemClicked(var screenId)
 
-
     Image {
         id: mask
         source: "qrc:/assets/images/Window.svg"
-        sourceSize: Qt.size(itemWrapper.width, itemWrapper.height)
+        sourceSize: Qt.size(rectangle1.width, rectangle1.height)
-        smooth: true
         visible: false
+        fillMode: Image.PreserveAspectFit
+        antialiasing: true
+    }
+
+    RectangularGlow {
+        id: effect
+        anchors.fill: itemWrapper
+        glowRadius: 2
+        spread: 0.5
+        color: "black"
+        opacity: .2
+        cornerRadius: itemWrapper.radius + glowRadius
     }
 
     Rectangle {
         id: itemWrapper
         color: "white"
-        radius: 6
+        radius: 5
-        clip: true
-
         anchors {
             fill: parent
             margins: 5
         }
 
+
+
         Rectangle {
             id: rectangle1
             height: 121
             color: "#8b8b8b"
-            clip: true
+            visible: false
             anchors.right: parent.right
             anchors.rightMargin: 0
             anchors.left: parent.left
@@ -42,36 +52,55 @@ Item {
             anchors.top: parent.top
             anchors.topMargin: 0
 
+
             ScreenPlayItemImage {
                 id: screenPlayItemImage
+
                 sourceImage: Qt.resolvedUrl(
                                  "file:///" + installedListModel._screensPath
                                  + screenFolderId + "/" + screenPreview)
             }
         }
 
+        OpacityMask {
+            anchors.fill: rectangle1
+            antialiasing: true
+            source: rectangle1
+            maskSource: mask
+
+        }
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                itemClicked(screenId)
+            }
+        }
+
+
         Text {
             id: text1
             y: 136
             height: 29
             text: screenTitle
-            anchors.rightMargin: 156
+            renderType: Text.NativeRendering
-            anchors.leftMargin: 5
+            anchors.rightMargin: 108
-            anchors.bottomMargin: 5
+            anchors.leftMargin: 10
-            anchors.topMargin: 5
+            anchors.bottomMargin: 10
+            anchors.topMargin: 10
             anchors.top: rectangle1.bottom
             anchors.right: parent.right
             anchors.bottom: parent.bottom
             anchors.left: parent.left
-            wrapMode: Text.WrapAnywhere
+            wrapMode: Text.WordWrap
-            font.pixelSize: 11
-            anchors.margins: 10
-        }
 
-        MouseArea {
+            font.pixelSize: 12
-            anchors.fill: parent
+            color: "#2F2F2F"
-            onClicked: {
+            anchors.margins: 10
-                itemClicked(screenId)
+            font.family: font_Roboto_Regular.name
+
+            FontLoader {
+                id: font_Roboto_Regular
+                source: "qrc:/assets/fonts/Roboto-Regular.ttf"
             }
         }
 

qml/Components/ScreenPlayItemImage.qml

@@ -2,10 +2,12 @@ import QtQuick 2.7
 
 Image {
     id: image
-    width: 300
+    width: 320
-    height: 250
+    height: 121
     state: "loading"
 
+    property string sourceImage: ""
+
     states: [
         State {
             name: "loading"
@@ -39,7 +41,7 @@ Image {
         }
     ]
 
-    property string sourceImage: ""
+
 
     onSourceImageChanged: {
         image.source = sourceImage

qml/Components/Sidebar.qml

@@ -78,13 +78,13 @@ Item {
 
                 Image {
                     id: imgBack
-                    width: 22
+
-                    height: 30
                     anchors.left: parent.left
                     anchors.leftMargin: 0
                     opacity: 1
                     source: "qrc:/assets/icons/icon_arrow_left.svg"
-                    sourceSize: Qt.size(22,30)
+                    sourceSize: Qt.size(14,23)
+                    fillMode: Image.PreserveAspectCrop
                     anchors {
                         top:parent.top
                         topMargin: 0