Refactor steam offline message visuals

ScreenPlay/Resources.qrc

@@ -129,5 +129,6 @@
         <file>qml/Create/WizardsFiles/QMLWallpaperMain.qml</file>
         <file>qml/Create/WizardsFiles/QMLWidgetMain.qml</file>
         <file>assets/icons/font-awsome/patreon-brands.svg</file>
+        <file>assets/images/steam_offline.png</file>
     </qresource>
 </RCC>

ScreenPlay/main.qml

@@ -43,7 +43,9 @@ ApplicationWindow {
                               })
             return
         }
-        stackView.replace("qrc:/ScreenPlay/qml/" + name + "/" + name + ".qml")
+        stackView.replace("qrc:/ScreenPlay/qml/" + name + "/" + name + ".qml", {
+                              "modalSource": content
+                          })
         sidebar.state = "inactive"
     }
 

ScreenPlay/qml/Workshop/PopupOffline.qml

@@ -1,9 +1,11 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import QtQuick.Controls.Material
 import Qt5Compat.GraphicalEffects
 import Workshop 1.0
 import ScreenPlay 1.0
+import "../Common"
 
 Popup {
     id: popupOffline
@@ -15,36 +17,62 @@ Popup {
     anchors.centerIn: Overlay.overlay
     dim: true
 
-    property ScreenPlayWorkshop workshop
-    property SteamWorkshop steam
+    background: Rectangle {
+        color: Material.theme === Material.Light ? "white" : Material.background
+    }
+    required property ScreenPlayWorkshop workshop
+    required property SteamWorkshop steam
+    required property var modalSource
+    Overlay.modal: ModalBackgroundBlur {
+        sourceItem: root.modalSource
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: 40
+        spacing: 20
+        Item {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+
+        Image {
+            source: "qrc:/assets/images/steam_offline.png"
+            Layout.alignment: Qt.AlignHCenter
+        }
 
         Text {
-        id: txtOffline
-
-        anchors.centerIn: parent
             font.family: ScreenPlay.settings.font
-        font.pointSize: 21
-        color: Material.foreground
-        text: qsTr("You need to run Steam for this. steamErrorRestart: %1 - steamErrorAPIInit: %2").arg(steam.steamErrorRestart).arg(steam.steamErrorAPIInit)
+            font.pointSize: 16
+            horizontalAlignment: Text.AlignHCenter
+            Layout.alignment: Qt.AlignHCenter
+            color: Material.primaryTextColor
+            text: qsTr(
+                      "You need to run Steam to access the Steam Workshop").arg(
+                      steam.steamErrorRestart).arg(steam.steamErrorAPIInit)
+        }
+        Text {
+            font.family: ScreenPlay.settings.font
+            font.pointSize: 12
+            horizontalAlignment: Text.AlignHCenter
+            Layout.alignment: Qt.AlignHCenter
+            color: Material.secondaryTextColor
+            text: qsTr("Steam Error Restart: %1\nSteam Error API Init: %2").arg(
+                      steam.steamErrorRestart).arg(steam.steamErrorAPIInit)
         }
 
         Button {
             highlighted: true
             text: qsTr("Back")
+            Layout.alignment: Qt.AlignHCenter
             onClicked: {
-            ScreenPlay.util.setNavigation("Installed");
-            popupOffline.close();
+                ScreenPlay.util.setNavigation("Installed")
+                popupOffline.close()
             }
-
-        anchors {
-            horizontalCenter: parent.horizontalCenter
-            top: txtOffline.bottom
         }
-
+        Item {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
         }
-
-    background: Rectangle {
-        color: Material.theme === Material.Light ? "white" : Material.background
     }
-
 }