First attempt at QML hacking.

Main and ServiceControl adapted. Project files

20 files changed, 797 insertions, 794 deletions

diff --git a/rockwork/qml/AppSettingsPage.qml b/rockwork/qml/AppSettingsPage.qml
index d8d865b..da7d577 100644
--- a/rockwork/qml/AppSettingsPage.qml
+++ b/rockwork/qml/AppSettingsPage.qml
@@ -1,7 +1,5 @@
-import QtQuick 2.4
-import Ubuntu.Web 0.2
-import Ubuntu.Components 1.3
-import com.canonical.Oxide 1.0 as Oxide
+import QtQuick 2.0
+import Sailfish.Silica 1.0
 
 Page {
     id: settings
diff --git a/rockwork/qml/AppStoreDetailsPage.qml b/rockwork/qml/AppStoreDetailsPage.qml
index 696e3c6..dbb8d5f 100644
--- a/rockwork/qml/AppStoreDetailsPage.qml
+++ b/rockwork/qml/AppStoreDetailsPage.qml
@@ -1,7 +1,5 @@
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
-import Ubuntu.Components.ListItems 1.3
+import QtQuick 2.0
+import Sailfish.Silica 1.0
 import QtGraphicalEffects 1.0
 
 Page {
diff --git a/rockwork/qml/AppStorePage.qml b/rockwork/qml/AppStorePage.qml
index bb8712b..7e006da 100644
--- a/rockwork/qml/AppStorePage.qml
+++ b/rockwork/qml/AppStorePage.qml
@@ -1,11 +1,10 @@
-import QtQuick 2.4
-import Ubuntu.Components 1.3
-import QtQuick.Layouts 1.1
-import RockWork 1.0
+import QtQuick 2.0
+import QtQml 2.1
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 Page {
     id: root
-    title: showWatchApps ? i18n.tr("Add new watchapp") : i18n.tr("Add new watchface")
 
     property var pebble: null
     property bool showWatchApps: false
@@ -20,247 +19,250 @@ Page {
             client.fetchHome(AppStoreClient.TypeWatchface)
         }
     }
-
-    head {
-        actions: [
-            Action {
-                iconName: "search"
-                onTriggered: {
-                    if (searchField.shown) {
-                        searchField.shown = false;
-                        root.fetchHome();
-                    } else {
-                        searchField.shown = true;
+    SilicaFlickable {
+        id: flickable
+        anchors.top: parent.top
+        width: parent.width
+        PageHeader {
+            title: showWatchApps ? qsTr("Add new watchapp") : qsTr("Add new watchface")
+        }
+        PullDownMenu {
+                MenuItem {
+                    text: qsTr("Show search")
+                    onClicked: {
+                        if (searchField.shown) {
+                            searchField.shown = false;
+                            root.fetchHome();
+                        } else {
+                            searchField.shown = true;
+                        }
                     }
                 }
-            }
-        ]
-    }
+        }
 
-    Component.onCompleted: {
-        if (root.link) {
-            client.fetchLink(link)
-        } else {
-            root.fetchHome()
+        Component.onCompleted: {
+            if (root.link) {
+                client.fetchLink(link)
+            } else {
+                root.fetchHome()
+            }
         }
-    }
 
-    AppStoreClient {
-        id: client
-        hardwarePlatform: pebble.hardwarePlatform
-    }
+        AppStoreClient {
+            id: client
+            hardwarePlatform: pebble.hardwarePlatform
+        }
 
-    Item {
-        id: searchField
-        anchors { left: parent.left; right: parent.right; top: parent.top }
-        anchors.topMargin: shown ? 0 : -height
-        Behavior on anchors.topMargin { UbuntuNumberAnimation {} }
-        opacity: shown ? 1 : 0
-        Behavior on opacity { UbuntuNumberAnimation {} }
-        height: units.gu(6)
+        Item {
+            id: searchField
+            anchors { left: parent.left; right: parent.right; top: parent.top }
+            anchors.topMargin: shown ? 0 : -height
+            Behavior on anchors.topMargin { NumberAnimation {} }
+            opacity: shown ? 1 : 0
+            Behavior on opacity { NumberAnimation {} }
+            height: units.gu(6)
 
-        property bool shown: false
-        onShownChanged: {
-            if (shown) {
-                searchTextField.focus = true;
+            property bool shown: false
+            onShownChanged: {
+                if (shown) {
+                    searchTextField.focus = true;
+                }
             }
-        }
 
-        TextField {
-            id: searchTextField
-            anchors.centerIn: parent
-            width: parent.width - units.gu(2)
-            onDisplayTextChanged: {
-                searchTimer.restart()
-            }
+            SearchField {
+                id: searchTextField
+                anchors.centerIn: parent
+                width: parent.width - units.gu(2)
+                onDisplayTextChanged: {
+                    searchTimer.restart()
+                }
 
-            Timer {
-                id: searchTimer
-                interval: 300
-                onTriggered: {
-                    client.search(searchTextField.displayText, root.showWatchApps ? AppStoreClient.TypeWatchapp : AppStoreClient.TypeWatchface);
+                Timer {
+                    id: searchTimer
+                    interval: 300
+                    onTriggered: {
+                        client.search(searchTextField.displayText, root.showWatchApps ? AppStoreClient.TypeWatchapp : AppStoreClient.TypeWatchface);
+                    }
                 }
             }
         }
-    }
 
-    Item {
-        anchors { left: parent.left; top: searchField.bottom; right: parent.right; bottom: parent.bottom }
-        ListView {
-            anchors.fill: parent
-            model: ApplicationsFilterModel {
-                id: appsFilterModel
-                model: client.model
-            }
-            clip: true
-            section.property: "groupId"
-            section.labelPositioning: ViewSection.CurrentLabelAtStart |
-                                      ViewSection.InlineLabels
-            section.delegate: ListItem {
-                height: section ? label.implicitHeight + units.gu(3) : 0
-
-                Rectangle {
-                    anchors.fill: parent
-                    color: "white"
+        Item {
+            anchors { left: parent.left; top: searchField.bottom; right: parent.right; bottom: parent.bottom }
+            ListView {
+                anchors.fill: parent
+                model: ApplicationsFilterModel {
+                    id: appsFilterModel
+                    model: client.model
                 }
+                clip: true
+                section.property: "groupId"
+                section.labelPositioning: ViewSection.CurrentLabelAtStart |
+                                          ViewSection.InlineLabels
+                section.delegate: ListItem {
+                    height: section ? label.implicitHeight + units.gu(3) : 0
 
-                RowLayout {
-                    anchors.fill: parent
-                    anchors.margins: units.gu(1)
-                    Label {
-                        id: label
-                        text: client.model.groupName(section)
-                        fontSize: "large"
-//                        font.weight: Font.DemiBold
-                        elide: Text.ElideRight
-                        Layout.fillWidth: true
+                    Rectangle {
+                        anchors.fill: parent
+                        color: "white"
                     }
-                    AbstractButton {
-                        Layout.fillHeight: true
-                        implicitWidth: seeAllLabel.implicitWidth + height
-                        Row {
-                            anchors.verticalCenter: parent.verticalCenter
-                            Label {
-                                id: seeAllLabel
-                                text: i18n.tr("See all")
+
+                    Row {
+                        anchors.fill: parent
+                        anchors.margins: units.gu(1)
+                        Label {
+                            id: label
+                            text: client.model.groupName(section)
+                            font.pixelSize: Theme.fontSizeLarge
+    //                        font.weight: Font.DemiBold
+                            elide: Text.ElideRight
+                            width: parent.width
+                        }
+                        Button {
+                            implicitWidth: seeAllLabel.implicitWidth + height
+                            Row {
+                                anchors.verticalCenter: parent.verticalCenter
+                                Label {
+                                    id: seeAllLabel
+                                    text: qsTr("See all")
+                                }
+                                IconButton {
+                                    implicitHeight: parent.height
+                                    implicitWidth: height
+                                    icon.source: "image://theme/icon-m-forward"
+                                }
                             }
-                            Icon {
-                                implicitHeight: parent.height
-                                implicitWidth: height
-                                name: "go-next"
+                            onClicked: {
+                                pageStack.push(Qt.resolvedUrl("AppStorePage.qml"), {pebble: root.pebble, link: client.model.groupLink(section), title: client.model.groupName(section)});
                             }
                         }
-                        onClicked: {
-                            pageStack.push(Qt.resolvedUrl("AppStorePage.qml"), {pebble: root.pebble, link: client.model.groupLink(section), title: client.model.groupName(section)});
-                        }
                     }
                 }
-            }
 
-            footer: Item {
-                height: client.model.links.length > 0 ? units.gu(6) : 0
-                width: parent.width
+                footer: Item {
+                    height: client.model.links.length > 0 ? units.gu(6) : 0
+                    width: parent.width
 
-                RowLayout {
-                    anchors {
-                        fill: parent
-                        margins: units.gu(1)
-                    }
-                    spacing: units.gu(1)
+                    Row {
+                        anchors {
+                            fill: parent
+                            margins: units.gu(1)
+                        }
+                        spacing: units.gu(1)
 
-                    Repeater {
-                        model: client.model.links
-                        Button {
-                            text: client.model.linkName(client.model.links[index])
-                            onClicked: client.fetchLink(client.model.links[index]);
-                            color: UbuntuColors.orange
-                            Layout.fillWidth: true
+                        Repeater {
+                            model: client.model.links
+                            Button {
+                                text: client.model.linkName(client.model.links[index])
+                                onClicked: client.fetchLink(client.model.links[index]);
+                                color: UbuntuColors.orange
+                                width: parent.width
+                            }
                         }
                     }
                 }
-            }
-
-            delegate: ListItem {
-                height: delegateColumn.height + units.gu(2)
 
-                RowLayout {
-                    id: delegateRow
-                    anchors.fill: parent
-                    anchors.margins: units.gu(1)
-                    spacing: units.gu(1)
+                delegate: ListItem {
+                    height: delegateColumn.height + units.gu(2)
 
-                    AnimatedImage {
-                        Layout.fillHeight: true
-                        Layout.preferredWidth: height
-                        source: model.icon
-                        asynchronous: true
-//                        sourceSize.width: width
-//                        sourceSize.height: height
-                    }
+                    Row {
+                        id: delegateRow
+                        anchors.fill: parent
+                        anchors.margins: units.gu(1)
+                        spacing: units.gu(1)
 
-                    ColumnLayout {
-                        id: delegateColumn
-                        Layout.fillWidth: true;
-                        Layout.fillHeight: true;
-                        Label {
-                            Layout.fillWidth: true
-                            text: model.name
-                            font.weight: Font.DemiBold
-                            elide: Text.ElideRight
+                        AnimatedImage {
+                            source: model.icon
+                            asynchronous: true
+    //                        sourceSize.width: width
+    //                        sourceSize.height: height
                         }
-                        Label {
-                            Layout.fillWidth: true
-                            text: model.category
-                        }
-                        RowLayout {
-                            Icon {
-                                name: "like"
-                                Layout.preferredHeight: parent.height
-                                Layout.preferredWidth: height
-                                implicitHeight: parent.height
+
+                        Column {
+                            id: delegateColumn
+                            width: parent.width
+                            //Layout.fillHeight: true;
+                            Label {
+                                width: parent.width
+                                text: model.name
+                                font.weight: Font.DemiBold
+                                elide: Text.ElideRight
                             }
                             Label {
-                                Layout.fillWidth: true
-                                text: model.hearts
+                                width: parent.width
+                                text: model.category
                             }
-                            Icon {
-                                id: tickIcon
-                                name: "tick"
-                                implicitHeight: parent.height
-                                Layout.preferredWidth: height
-                                visible: root.pebble.installedApps.contains(model.storeId) || root.pebble.installedWatchfaces.contains(model.storeId)
-                                Connections {
-                                    target: root.pebble.installedApps
-                                    onChanged: {
-                                        tickIcon.visible = root.pebble.installedApps.contains(model.storeId) || root.pebble.installedWatchfaces.contains(model.storeId)
-                                    }
+                            Row {
+                                IconButton {
+                                    icon.source: "image://theme/icon-m-back"
+                                    id: like
+                                    //Layout.preferredHeight: parent.height
+                                    //Layout.preferredWidth: height
+                                    implicitHeight: parent.height
+                                }
+                                Label {
+                                    width: parent.width
+                                    text: model.hearts
                                 }
+                                IconButton {
+                                    id: tickIcon
+                                    icon.source: "image://theme/icon-m-acknowledge"
+                                    implicitHeight: parent.height
+                                    //Layout.preferredWidth: height
+                                    visible: root.pebble.installedApps.contains(model.storeId) || root.pebble.installedWatchfaces.contains(model.storeId)
+                                    Connections {
+                                        target: root.pebble.installedApps
+                                        onTargetChanged: {
+                                            tickIcon.visible = root.pebble.installedApps.contains(model.storeId) || root.pebble.installedWatchfaces.contains(model.storeId)
+                                        }
+                                    }
 
-                                Connections {
-                                    target: root.pebble.installedWatchfaces
-                                    onChanged: {
-                                        tickIcon.visible = root.pebble.installedApps.contains(model.storeId) || root.pebble.installedWatchfaces.contains(model.storeId)
+                                    Connections {
+                                        target: root.pebble.installedWatchfaces
+                                        onTargetChanged: {
+                                            tickIcon.visible = root.pebble.installedApps.contains(model.storeId) || root.pebble.installedWatchfaces.contains(model.storeId)
+                                        }
                                     }
-                                }
 
+                                }
                             }
                         }
-                    }
 
-                }
+                    }
 
-                onClicked: {
-                    client.fetchAppDetails(model.storeId);
-                    pageStack.push(Qt.resolvedUrl("AppStoreDetailsPage.qml"), {app: appsFilterModel.get(index), pebble: root.pebble})
+                    onClicked: {
+                        client.fetchAppDetails(model.storeId);
+                        pageStack.push(Qt.resolvedUrl("AppStoreDetailsPage.qml"), {app: appsFilterModel.get(index), pebble: root.pebble})
+                    }
                 }
             }
-        }
 
-//        RowLayout {
-//            id: buttonRow
-//            anchors { left: parent.left; bottom: parent.bottom; right: parent.right; margins: units.gu(1) }
-//            spacing: units.gu(1)
-//            Button {
-//                text: i18n.tr("Previous")
-//                Layout.fillWidth: true
-//                enabled: client.offset > 0
-//                onClicked: {
-//                    client.previous()
-//                }
-//            }
-//            Button {
-//                text: i18n.tr("Next")
-//                Layout.fillWidth: true
-//                onClicked: {
-//                    client.next()
-//                }
-//            }
-//        }
-    }
+    //        RowLayout {
+    //            id: buttonRow
+    //            anchors { left: parent.left; bottom: parent.bottom; right: parent.right; margins: units.gu(1) }
+    //            spacing: units.gu(1)
+    //            Button {
+    //                text: qsTr("Previous")
+    //                Layout.fillWidth: true
+    //                enabled: client.offset > 0
+    //                onClicked: {
+    //                    client.previous()
+    //                }
+    //            }
+    //            Button {
+    //                text: qsTr("Next")
+    //                Layout.fillWidth: true
+    //                onClicked: {
+    //                    client.next()
+    //                }
+    //            }
+    //        }
+        }
 
-    ActivityIndicator {
-        anchors.centerIn: parent
-        running: client.busy
+        BusyIndicator {
+            anchors.centerIn: parent
+            running: client.busy
+        }
     }
 }
 
diff --git a/rockwork/qml/ContentPeerPickerPage.qml b/rockwork/qml/ContentPeerPickerPage.qml
index 7ee9702..9f9917f 100644
--- a/rockwork/qml/ContentPeerPickerPage.qml
+++ b/rockwork/qml/ContentPeerPickerPage.qml
@@ -1,7 +1,6 @@
-import QtQuick 2.4
-import Ubuntu.Components 1.3
-import Ubuntu.Content 1.3
-import RockWork 1.0
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 Page {
     id: pickerPage
diff --git a/rockwork/qml/CoverPage.qml b/rockwork/qml/CoverPage.qml
new file mode 100644
index 0000000..962e876
--- /dev/null
+++ b/rockwork/qml/CoverPage.qml
@@ -0,0 +1,44 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+CoverBackground {
+    property var pebble: null
+    Image {
+        fillMode: Image.PreserveAspectCrop
+        anchors.fill: parent
+        source: "back-cover.png"
+    }
+
+    Label {
+        id: label
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: state.top
+        anchors.bottomMargin: Theme.paddingSmall
+        font.pointSize: Theme.fontSizeExtraLarge
+        text: pebble.name ? pebble.name : "Pebble"
+    }
+    Label {
+        id: state
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.verticalCenter
+        font.pointSize: Theme.fontSizeExtraSmall
+        color: Theme.highlightColor
+        text: pebble.connected ? qsTr("connected") : qsTr("disconnected")
+    }
+
+    CoverActionList {
+        id: coverAction
+        enabled: pebble.connected
+
+        CoverAction {
+            iconSource: pebble.connected ? "image://theme/icon-cover-transfers" : "image://theme/icon-cover-sync"
+            onTriggered: {
+                if (pebble.connected) {
+                    pebble.requestScreenshot();
+                } else {
+                    pebble.reconnect();
+                }
+            }
+        }
+    }
+}
diff --git a/rockwork/qml/DeveloperToolsPage.qml b/rockwork/qml/DeveloperToolsPage.qml
index 2f77254..dec03d1 100644
--- a/rockwork/qml/DeveloperToolsPage.qml
+++ b/rockwork/qml/DeveloperToolsPage.qml
@@ -1,8 +1,6 @@
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
-import Ubuntu.Components.Popups 1.3
-import Ubuntu.Content 1.3
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 Page {
     id: root
diff --git a/rockwork/qml/FirmwareUpgradePage.qml b/rockwork/qml/FirmwareUpgradePage.qml
index 3281a12..0b0a6d5 100644
--- a/rockwork/qml/FirmwareUpgradePage.qml
+++ b/rockwork/qml/FirmwareUpgradePage.qml
@@ -1,5 +1,5 @@
-import QtQuick 2.4
-import Ubuntu.Components 1.3
+import QtQuick 2.0
+import Sailfish.Silica 1.0
 
 Page {
     id: root
diff --git a/rockwork/qml/HealthSettingsDialog.qml b/rockwork/qml/HealthSettingsDialog.qml
index 94e5d22..66a0215 100644
--- a/rockwork/qml/HealthSettingsDialog.qml
+++ b/rockwork/qml/HealthSettingsDialog.qml
@@ -1,8 +1,6 @@
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
-import Ubuntu.Components.Popups 1.3
-import Ubuntu.Components.ListItems 1.3
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 Dialog {
     id: root
diff --git a/rockwork/qml/ImportPackagePage.qml b/rockwork/qml/ImportPackagePage.qml
index 4f86f78..5de3df0 100644
--- a/rockwork/qml/ImportPackagePage.qml
+++ b/rockwork/qml/ImportPackagePage.qml
@@ -1,6 +1,6 @@
-import QtQuick 2.4
-import Ubuntu.Components 1.3
-import Ubuntu.Content 1.3
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 Page {
     id: root
diff --git a/rockwork/qml/InfoPage.qml b/rockwork/qml/InfoPage.qml
index 3eec387..b23aed1 100644
--- a/rockwork/qml/InfoPage.qml
+++ b/rockwork/qml/InfoPage.qml
@@ -1,7 +1,5 @@
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
-import Ubuntu.Components.ListItems 1.3
+import QtQuick 2.0
+import Sailfish.Silica 1.0
 
 Page {
     title: "About RockWork"
diff --git a/rockwork/qml/InstalledAppDelegate.qml b/rockwork/qml/InstalledAppDelegate.qml
index 89f6ba8..e910a40 100644
--- a/rockwork/qml/InstalledAppDelegate.qml
+++ b/rockwork/qml/InstalledAppDelegate.qml
@@ -1,7 +1,6 @@
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
-import RockWork 1.0
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 ListItem {
     id: root
@@ -17,71 +16,62 @@ ListItem {
     signal deleteApp();
     signal configureApp();
 
-    leadingActions: ListItemActions {
-        actions: [
-            Action {
-                visible: !root.isSystemApp
-                iconName: "delete"
-                onTriggered: {
-                    root.deleteApp();
-                }
+    menu: ContextMenu {
+        MenuItem {
+            visible: !root.isSystemApp
+            text: "Delete"
+            onClicked: {
+                root.deleteApp();
             }
-        ]
-    }
-
-    trailingActions: ListItemActions {
-        actions: [
-            Action {
-                visible: root.hasSettings
-                iconName: "settings"
-                onTriggered: {
-                    print("settings triggered")
-                    root.configureApp();
-                }
+        }
+        MenuItem {
+            visible: root.hasSettings
+            text: "Settings"
+            onClicked: {
+                print("Settings triggered")
+                root.configureApp();
             }
-        ]
+        }
     }
 
-    RowLayout {
+    Row {
         anchors {
             fill: parent
-            margins: units.gu(1)
+            //margins: units.gu(1)
         }
-        spacing: units.gu(1)
+        //spacing: units.gu(1)
 
         SystemAppIcon {
-            Layout.fillHeight: true
-            Layout.preferredWidth: height
             isSystemApp: root.isSystemApp
             uuid: root.uuid
             iconSource: root.iconSource
         }
 
-        ColumnLayout {
-            Layout.fillWidth: true
+        Column {
+            width: parent.width
             Label {
                 text: root.name
-                Layout.fillWidth: true
+                width: parent.width
             }
 
             Label {
                 text: root.vendor
-                Layout.fillWidth: true
-                fontSize: "small"
+                width: parent.width
+                font.pixelSize: Theme.fontSizeSmall
             }
         }
 
         Item {
             id: grip
-            Layout.fillHeight: true
-            Layout.preferredWidth: height
+//            Layout.fillHeight: true
+//            Layout.preferredWidth: height
             opacity: (root.contentMoving || root.swiped || root.dragging) ? 0 : 1
-            Behavior on opacity { UbuntuNumberAnimation {} }
-            Icon {
-                width: units.gu(3)
+            Behavior on opacity { NumberAnimation {} }
+            IconButton {
+                //width: units.gu(3)
                 height: width
                 anchors.centerIn: parent
-                name: "grip-large"
+                icon.source: "image://theme/icon-m-gesture"
             }
         }
     }
diff --git a/rockwork/qml/InstalledAppsPage.qml b/rockwork/qml/InstalledAppsPage.qml
index a18cd3f..f7c8113 100644
--- a/rockwork/qml/InstalledAppsPage.qml
+++ b/rockwork/qml/InstalledAppsPage.qml
@@ -1,200 +1,204 @@
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
-import Ubuntu.Components.Popups 1.3
-import RockWork 1.0
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 Page {
     id: root
-    title: showWatchApps ? (showWatchFaces ? i18n.tr("Apps & Watchfaces") : i18n.tr("Apps")) : i18n.tr("Watchfaces")
 
     property var pebble: null
     property bool showWatchApps: false
     property bool showWatchFaces: false
 
-    head {
-        actions: [
-            Action {
-                iconName: "add"
-                onTriggered: pageStack.push(Qt.resolvedUrl("AppStorePage.qml"), {pebble: root.pebble, showWatchApps: root.showWatchApps, showWatchFaces: root.showWatchFaces})
+    SilicaFlickable {
+        id: flickable
+        anchors.top: parent.top
+        width: parent.width
+        PullDownMenu {
+            MenuItem {
+                text: qsTr("Add")
+                onClicked: pageStack.push(Qt.resolvedUrl("AppStorePage.qml"), {pebble: root.pebble, showWatchApps: root.showWatchApps, showWatchFaces: root.showWatchFaces})
             }
-        ]
-    }
+        }
 
-    function configureApp(uuid) {
-        // The health app is special :/
-        if (uuid == "{36d8c6ed-4c83-4fa1-a9e2-8f12dc941f8c}") {
-            var popup = PopupUtils.open(Qt.resolvedUrl("HealthSettingsDialog.qml"), root, {healthParams: pebble.healthParams});
-            popup.accepted.connect(function() {
-                pebble.healthParams = popup.healthParams
-            })
-        } else {
-            pebble.requestConfigurationURL(uuid);
+        PageHeader {
+            title: showWatchApps ? (showWatchFaces ? qsTr("Apps & Watchfaces") : qsTr("Apps")) : qsTr("Watchfaces")
         }
-    }
 
-    Item {
-        anchors.fill: parent
-        ListView {
-            id: listView
-            anchors.fill: parent
-            model: root.showWatchApps ? root.pebble.installedApps : root.pebble.installedWatchfaces
-            clip: true
-            property real realContentY: contentY + originY
-
-            delegate: InstalledAppDelegate {
-                id: delegate
-                uuid: model.uuid
-                name: model.name
-                iconSource: model.icon
-                vendor: model.vendor
-                visible: dndArea.draggedIndex !== index
-                hasGrip: index > 0
-                isSystemApp: model.isSystemApp
-                hasSettings: model.hasSettings
-
-                onDeleteApp: {
-                    pebble.removeApp(model.uuid)
-                }
-                onConfigureApp: {
-                    root.configureApp(model.uuid)
-                }
-                onClicked: {
-                    PopupUtils.open(dialogComponent, root, {app: listView.model.get(index)})
-                }
+        function configureApp(uuid) {
+            // The health app is special :/
+            if (uuid == "{36d8c6ed-4c83-4fa1-a9e2-8f12dc941f8c}") {
+                var popup = PopupUtils.open(Qt.resolvedUrl("HealthSettingsDialog.qml"), root, {healthParams: pebble.healthParams});
+                popup.accepted.connect(function() {
+                    pebble.healthParams = popup.healthParams
+                })
+            } else {
+                pebble.requestConfigurationURL(uuid);
             }
         }
-        MouseArea {
-            id: dndArea
-            anchors {
-                top: parent.top
-                bottom: parent.bottom
-                right: parent.right
+
+        Item {
+            anchors.fill: parent
+            ListView {
+                id: listView
+                anchors.fill: parent
+                model: root.showWatchApps ? root.pebble.installedApps : root.pebble.installedWatchfaces
+                clip: true
+                property real realContentY: contentY + originY
+
+                delegate: InstalledAppDelegate {
+                    id: delegate
+                    uuid: model.uuid
+                    name: model.name
+                    iconSource: model.icon
+                    vendor: model.vendor
+                    visible: dndArea.draggedIndex !== index
+                    hasGrip: index > 0
+                    isSystemApp: model.isSystemApp
+                    hasSettings: model.hasSettings
+
+                    onDeleteApp: {
+                        pebble.removeApp(model.uuid)
+                    }
+                    onConfigureApp: {
+                        root.configureApp(model.uuid)
+                    }
+                    onClicked: {
+                        PopupUtils.open(dialogComponent, root, {app: listView.model.get(index)})
+                    }
+                }
             }
-            drag.axis: Drag.YAxis
-            propagateComposedEvents: true
-            width: units.gu(5)
+            MouseArea {
+                id: dndArea
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                    right: parent.right
+                }
+                drag.axis: Drag.YAxis
+                propagateComposedEvents: true
+                //width: units.gu(5)
 
-            property int startY: 0
-            property int draggedIndex: -1
+                property int startY: 0
+                property int draggedIndex: -1
 
 
-            onPressAndHold: {
-                startY = mouseY;
-                draggedIndex = Math.floor((listView.realContentY + mouseY) / fakeDragItem.height)
-                if (draggedIndex == 0) {
-                    print("cannot drag settings app");
-                    return;
-                }
+                onPressAndHold: {
+                    startY = mouseY;
+                    draggedIndex = Math.floor((listView.realContentY + mouseY) / fakeDragItem.height)
+                    if (draggedIndex == 0) {
+                        print("cannot drag settings app");
+                        return;
+                    }
 
-                var draggedItem = listView.model.get(draggedIndex);
-                fakeDragItem.uuid = draggedItem.uuid;
-                fakeDragItem.name = draggedItem.name;
-                fakeDragItem.vendor = draggedItem.vendor;
-                fakeDragItem.iconSource = draggedItem.icon;
-                fakeDragItem.isSystemApp = draggedItem.isSystemApp;
-                fakeDragItem.y = (fakeDragItem.height * draggedIndex) - listView.realContentY
-                drag.target = fakeDragItem;
-            }
+                    var draggedItem = listView.model.get(draggedIndex);
+                    fakeDragItem.uuid = draggedItem.uuid;
+                    fakeDragItem.name = draggedItem.name;
+                    fakeDragItem.vendor = draggedItem.vendor;
+                    fakeDragItem.iconSource = draggedItem.icon;
+                    fakeDragItem.isSystemApp = draggedItem.isSystemApp;
+                    fakeDragItem.y = (fakeDragItem.height * draggedIndex) - listView.realContentY
+                    drag.target = fakeDragItem;
+                }
 
-            onMouseYChanged: {
-                var newIndex = Math.floor((listView.realContentY + mouseY) / fakeDragItem.height)
+                onMouseYChanged: {
+                    var newIndex = Math.floor((listView.realContentY + mouseY) / fakeDragItem.height)
 
-                if (newIndex > draggedIndex) {
-                    newIndex = draggedIndex + 1;
-                } else if (newIndex < draggedIndex) {
-                    newIndex = draggedIndex - 1;
-                } else {
-                    return;
-                }
+                    if (newIndex > draggedIndex) {
+                        newIndex = draggedIndex + 1;
+                    } else if (newIndex < draggedIndex) {
+                        newIndex = draggedIndex - 1;
+                    } else {
+                        return;
+                    }
 
-                if (newIndex >= 1 && newIndex < listView.count) {
-                    listView.model.move(draggedIndex, newIndex);
-                    draggedIndex = newIndex;
+                    if (newIndex >= 1 && newIndex < listView.count) {
+                        listView.model.move(draggedIndex, newIndex);
+                        draggedIndex = newIndex;
+                    }
                 }
-            }
 
-            onReleased: {
-                if (draggedIndex > -1) {
-                    listView.model.commitMove();
-                    draggedIndex = -1;
-                    drag.target = null;
+                onReleased: {
+                    if (draggedIndex > -1) {
+                        listView.model.commitMove();
+                        draggedIndex = -1;
+                        drag.target = null;
+                    }
                 }
             }
         }
-    }
 
 
 
-    InstalledAppDelegate {
-        id: fakeDragItem
-        visible: dndArea.draggedIndex != -1
+        InstalledAppDelegate {
+            id: fakeDragItem
+            visible: dndArea.draggedIndex != -1
 
-    }
-
-    Component {
-        id: dialogComponent
-        Dialog {
-            id: dialog
-            property var app: null
-
-            RowLayout {
-                SystemAppIcon {
-                    height: titleCol.height
-                    width: height
-                    isSystemApp: app.isSystemApp
-                    uuid: app.uuid
-                    iconSource: app.icon
-                }
-
-                ColumnLayout {
-                    id: titleCol
-                    Layout.fillWidth: true
+        }
 
-                    Label {
-                        Layout.fillWidth: true
-                        text: app.name
-                        fontSize: "large"
+        Component {
+            id: dialogComponent
+            Dialog {
+                id: dialog
+                property var app: null
+
+                Row {
+                    SystemAppIcon {
+                        height: titleCol.height
+                        width: height
+                        isSystemApp: app.isSystemApp
+                        uuid: app.uuid
+                        iconSource: app.icon
                     }
-                    Label {
-                        Layout.fillWidth: true
-                        text: app.vendor
+
+                    Column {
+                        id: titleCol
+                        width: parent.width;
+
+                        Label {
+                            width: parent.width;
+                            text: app.name
+                            font.pixelSize: Theme.fontSizeLarge
+                        }
+                        Label {
+                            width: parent.width;
+                            text: app.vendor
+                        }
                     }
                 }
-            }
 
-            Button {
-                text: i18n.tr("Launch")
-                color: UbuntuColors.green
-                onClicked: {
-                    pebble.launchApp(app.uuid);
-                    PopupUtils.close(dialog);
+                Button {
+                    text: qsTr("Launch")
+                    color: UbuntuColors.green
+                    onClicked: {
+                        pebble.launchApp(app.uuid);
+                        PopupUtils.close(dialog);
+                    }
                 }
-            }
 
-            Button {
-                text: i18n.tr("Configure")
-                color: UbuntuColors.blue
-                visible: app.hasSettings
-                onClicked: {
-                    root.configureApp(app.uuid);
-                    PopupUtils.close(dialog);
+                Button {
+                    text: qsTr("Configure")
+                    color: UbuntuColors.blue
+                    visible: app.hasSettings
+                    onClicked: {
+                        root.configureApp(app.uuid);
+                        PopupUtils.close(dialog);
+                    }
                 }
-            }
 
-            Button {
-                text: i18n.tr("Delete")
-                color: UbuntuColors.red
-                visible: !app.isSystemApp
-                onClicked: {
-                    pebble.removeApp(app.uuid);
-                    PopupUtils.close(dialog);
+                Button {
+                    text: qsTr("Delete")
+                    color: UbuntuColors.red
+                    visible: !app.isSystemApp
+                    onClicked: {
+                        pebble.removeApp(app.uuid);
+                        PopupUtils.close(dialog);
+                    }
                 }
-            }
 
-            Button {
-                text: i18n.tr("Close")
-                onClicked: PopupUtils.close(dialog)
+                Button {
+                    text: qsTr("Close")
+                    onClicked: PopupUtils.close(dialog)
+                }
             }
         }
     }
diff --git a/rockwork/qml/Main.qml b/rockwork/qml/Main.qml
index 2bdece3..aae852b 100644
--- a/rockwork/qml/Main.qml
+++ b/rockwork/qml/Main.qml
@@ -1,26 +1,17 @@
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
-import RockWork 1.0
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 /*!
     \brief MainView with a Label and Button elements.
 */
 
-MainView {
-    applicationName: "rockwork.mzanetti"
-
-    width: units.gu(40)
-    height: units.gu(70)
+ApplicationWindow {
+    id: app
 
     ServiceController {
         id: serviceController
-        serviceName: "rockworkd"
         Component.onCompleted: {
-            if (!serviceController.serviceFileInstalled) {
-                print("Service file not installed. Installing now.")
-                serviceController.installServiceFile();
-            }
             if (!serviceController.serviceRunning) {
                 print("Service not running. Starting now.")
                 serviceController.startService();
@@ -41,6 +32,7 @@ MainView {
         pageStack.clear()
         if (pebbles.count == 1) {
             pageStack.push(Qt.resolvedUrl("MainMenuPage.qml"), {pebble: pebbles.get(0)})
+            app.cover.replace(Qt.resolvedUrl("CoverPage.qml"), {pebble: pebbles.get(0)})
         } else {
             pageStack.push(Qt.resolvedUrl("PebblesPage.qml"))
         }
diff --git a/rockwork/qml/MainMenuPage.qml b/rockwork/qml/MainMenuPage.qml
index 32c7b96..6713d70 100644
--- a/rockwork/qml/MainMenuPage.qml
+++ b/rockwork/qml/MainMenuPage.qml
@@ -1,311 +1,286 @@
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
+import QtQuick 2.0
+import Sailfish.Silica 1.0
 
 Page {
     id: root
-    title: pebble.name
 
     property var pebble: null
 
-    head {
-        actions: [
-            Action {
-                iconName: "info"
-                text: i18n.tr("About")
-                onTriggered: {
+    SilicaFlickable {
+        id: flickable
+        anchors.fill: parent
+        contentHeight: column.height
+
+        VerticalScrollDecorator { flickable: flickable }
+
+        PullDownMenu {
+            MenuItem {
+                text: qsTr("About")
+                onClicked: {
                     pageStack.push(Qt.resolvedUrl("InfoPage.qml"))
                 }
-            },
-            Action {
-                iconName: "ubuntu-sdk-symbolic"
-                text: i18n.tr("Developer tools")
-                onTriggered: {
+            }
+            MenuItem {
+                text: qsTr("Developer tools")
+                onClicked: {
                     pageStack.push(Qt.resolvedUrl("DeveloperToolsPage.qml"), {pebble: root.pebble})
                 }
             }
-        ]
-    }
-
-    //Creating the menu list this way to allow the text field to be translatable (http://askubuntu.com/a/476331)
-    ListModel {
-        id: mainMenuModel
-        dynamicRoles: true
-    }
-
-    Component.onCompleted: {
-        populateMainMenu();
-    }
-
-    Connections {
-        target: root.pebble
-        onFirmwareUpgradeAvailableChanged: {
-            populateMainMenu();
         }
-    }
+        Column {
+            id: column
+            width: root.width
+            spacing: Theme.paddingLarge
+            PageHeader {
+                title: qsTr("RockPool")
+            }
 
-    function populateMainMenu() {
-        mainMenuModel.clear();
-
-        mainMenuModel.append({
-            icon: "stock_notification",
-            text: i18n.tr("Manage notifications"),
-            page: "NotificationsPage.qml",
-            color: "blue"
-        });
-
-        mainMenuModel.append({
-            icon: "stock_application",
-            text: i18n.tr("Manage Apps"),
-            page: "InstalledAppsPage.qml",
-            showWatchApps: true,
-            color: UbuntuColors.green
-        });
-
-        mainMenuModel.append({
-            icon: "clock-app-symbolic",
-            text: i18n.tr("Manage Watchfaces"),
-            page: "InstalledAppsPage.qml",
-            showWatchFaces: true,
-            color: "black"
-        });
-
-        mainMenuModel.append({
-            icon: "settings",
-            text: i18n.tr("Settings"),
-            page: "SettingsPage.qml",
-            showWatchFaces: true,
-            color: "gold"
-        });
-
-        if (root.pebble.firmwareUpgradeAvailable) {
-            mainMenuModel.append({
-                icon: "preferences-system-updates-symbolic",
-                text: i18n.tr("Firmware upgrade"),
-                page: "FirmwareUpgradePage.qml",
-                color: "red"
-            });
-        }
+            ListView {
+                model: mainMenuModel
+            }
 
-    }
+            //Creating the menu list this way to allow the text field to be translatable (http://askubuntu.com/a/476331)
+            ListModel {
+                id: mainMenuModel
+                dynamicRoles: true
+            }
 
-    PebbleModels {
-        id: modelModel
-    }
+            Component.onCompleted: {
+                populateMainMenu();
+            }
 
-    GridLayout {
-        anchors.fill: parent
-        columns: parent.width > parent.height ? 2 : 1
+            Connections {
+                target: root.pebble
+                onFirmwareUpgradeAvailableChanged: {
+                    populateMainMenu();
+                }
+            }
 
-        Item {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            Layout.maximumHeight: units.gu(30)
+            function populateMainMenu() {
+                mainMenuModel.clear();
+
+                mainMenuModel.append({
+                                         icon: "stock_notification",
+                                         text: qsTr("Manage notifications"),
+                                         page: "NotificationsPage.qml",
+                                         color: "blue"
+                                     });
+
+                mainMenuModel.append({
+                                         icon: "stock_application",
+                                         text: qsTr("Manage Apps"),
+                                         page: "InstalledAppsPage.qml",
+                                         showWatchApps: true,
+                                         color: "green"
+                                     });
+
+                mainMenuModel.append({
+                                         icon: "clock-app-symbolic",
+                                         text: qsTr("Manage Watchfaces"),
+                                         page: "InstalledAppsPage.qml",
+                                         showWatchFaces: true,
+                                         color: "black"
+                                     });
+
+                mainMenuModel.append({
+                                         icon: "settings",
+                                         text: qsTr("Settings"),
+                                         page: "SettingsPage.qml",
+                                         showWatchFaces: true,
+                                         color: "gold"
+                                     });
+
+                if (root.pebble.firmwareUpgradeAvailable) {
+                    mainMenuModel.append({
+                                             icon: "preferences-system-updates-symbolic",
+                                             text: qsTr("Firmware upgrade"),
+                                             page: "FirmwareUpgradePage.qml",
+                                             color: "red"
+                                         });
+                }
+            }
 
-            RowLayout {
-                anchors.fill: parent
-                anchors.margins: units.gu(1)
-                spacing: units.gu(1)
+            PebbleModels {
+                id: modelModel
+            }
 
+            Column {
+                anchors.fill: parent
                 Item {
-                    Layout.alignment: Qt.AlignHCenter
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    Layout.minimumWidth: watchImage.width
+                    //Layout.alignment: Qt.AlignHCenter
+                    width: root.width
                     Image {
                         id: watchImage
                         width: implicitWidth * height / implicitHeight
                         height: parent.height
                         anchors.horizontalCenter: parent.horizontalCenter
 
-                        source:  modelModel.get(root.pebble.model).image
+                        source:  Qt.resolvedUrl("qrc:///"+modelModel.get(root.pebble.model).image)
                         fillMode: Image.PreserveAspectFit
+                    }
+                    Item {
+                        id: watchFace
+                        height: parent.height * (modelModel.get(root.pebble.model - 1).shape === "rectangle" ? .5 : .515)
+                        width: height * (modelModel.get(root.pebble.model - 1).shape === "rectangle" ? .85 : 1)
+                        anchors.centerIn: parent
+                        anchors.horizontalCenterOffset: units.dp(1)
+                        anchors.verticalCenterOffset: units.dp(modelModel.get(root.pebble.model - 1).shape === "rectangle" ? 0 : 1)
+
+                        Image {
+                            id: image
+                            anchors.fill: parent
+                            source: "file://" + root.pebble.screenshots.latestScreenshot
+                            visible: false
+                        }
 
-                        Item {
-                            id: watchFace
-                            height: parent.height * (modelModel.get(root.pebble.model - 1).shape === "rectangle" ? .5 : .515)
-                            width: height * (modelModel.get(root.pebble.model - 1).shape === "rectangle" ? .85 : 1)
-                            anchors.centerIn: parent
-                            anchors.horizontalCenterOffset: units.dp(1)
-                            anchors.verticalCenterOffset: units.dp(modelModel.get(root.pebble.model - 1).shape === "rectangle" ? 0 : 1)
-
-                            Image {
-                                id: image
-                                anchors.fill: parent
-                                source: "file://" + root.pebble.screenshots.latestScreenshot
-                                visible: false
-                            }
-
-                            Component.onCompleted: {
-                                if (!root.pebble.screenshots.latestScreenshot) {
-                                    root.pebble.requestScreenshot();
-                                }
+                        Component.onCompleted: {
+                            if (!root.pebble.screenshots.latestScreenshot) {
+                                root.pebble.requestScreenshot();
                             }
+                        }
 
-                            Rectangle {
-                                id: textItem
-                                anchors.fill: parent
-                                layer.enabled: true
-                                radius: modelModel.get(root.pebble.model - 1).shape === "rectangle" ? units.gu(.5) : height / 2
-                                // This item should be used as the 'mask'
-                                layer.samplerName: "maskSource"
-                                layer.effect: ShaderEffect {
-                                    property var colorSource: image;
-                                    fragmentShader: "
-                                        uniform lowp sampler2D colorSource;
-                                        uniform lowp sampler2D maskSource;
-                                        uniform lowp float qt_Opacity;
-                                        varying highp vec2 qt_TexCoord0;
-                                        void main() {
-                                            gl_FragColor =
-                                                texture2D(colorSource, qt_TexCoord0)
-                                                * texture2D(maskSource, qt_TexCoord0).a
-                                                * qt_Opacity;
-                                        }
-                                    "
-                                }
+                        Rectangle {
+                            id: textItem
+                            anchors.fill: parent
+                            layer.enabled: true
+                            radius: modelModel.get(root.pebble.model - 1).shape === "rectangle" ? units.gu(.5) : height / 2
+                            // This item should be used as the 'mask'
+                            layer.samplerName: "maskSource"
+                            layer.effect: ShaderEffect {
+                                property var colorSource: image;
+                                fragmentShader: "
+                                    uniform lowp sampler2D colorSource;
+                                    uniform lowp sampler2D maskSource;
+                                    uniform lowp float qt_Opacity;
+                                    varying highp vec2 qt_TexCoord0;
+                                    void main() {
+                                        gl_FragColor =
+                                            texture2D(colorSource, qt_TexCoord0)
+                                            * texture2D(maskSource, qt_TexCoord0).a
+                                            * qt_Opacity;
+                                    }
+                                "
                             }
                         }
                     }
                 }
-                ColumnLayout {
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
+                Column {
+                    width: root.width
                     spacing: units.gu(2)
                     Rectangle {
                         height: units.gu(10)
                         width: height
                         radius: height / 2
-                        color: root.pebble.connected ? UbuntuColors.green : UbuntuColors.red
+                        color: root.pebble.connected ? "green" : "red"
 
-                        Icon {
+                        IconButton {
                             anchors.fill: parent
                             anchors.margins: units.gu(2)
-                            color: "white"
-                            name: root.pebble.connected ? "tick" : "dialog-error-symbolic"
+                            icon.source: root.pebble.connected ? "image://theme/icon-m-acknowledge" : "image://theme/icon-m-reset"
                         }
                     }
 
                     Label {
-                        text: root.pebble.connected ? i18n.tr("Connected") : i18n.tr("Disconnected")
-                        Layout.fillWidth: true
+                        text: root.pebble.connected ? qsTr("Connected") : qsTr("Disconnected")
+                        width: root.width
                     }
                 }
             }
-        }
 
 
-        Column {
-            Layout.fillWidth: true
-            Layout.preferredHeight: childrenRect.height
-            spacing: menuRepeater.count > 0 ? 0 : units.gu(2)
-            Label {
-                text: i18n.tr("Your Pebble smartwatch is disconnected. Please make sure it is powered on, within range and it is paired properly in the Bluetooth System Settings.")
-                width: parent.width - units.gu(4)
-                anchors.horizontalCenter: parent.horizontalCenter
-                wrapMode: Text.WordWrap
-                visible: !root.pebble.connected
-                fontSize: "large"
-                horizontalAlignment: Text.AlignHCenter
-            }
-
-            Button {
-                text: i18n.tr("Open System Settings")
-                visible: !root.pebble.connected
-                onClicked: Qt.openUrlExternally("settings://system/bluetooth")
-                color: UbuntuColors.orange
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
+            Column {
+                width: root.width
+                //Layout.preferredHeight: childrenRect.height
+                spacing: menuRepeater.count > 0 ? 0 : units.gu(2)
+                Label {
+                    text: qsTr("Your Pebble smartwatch is disconnected. Please make sure it is powered on, within range and it is paired properly in the Bluetooth System Settings.")
+                    width: parent.width - units.gu(4)
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    wrapMode: Text.WordWrap
+                    visible: !root.pebble.connected
+                    font.pixelSize: Theme.fontSizeLarge
+                    horizontalAlignment: Text.AlignHCenter
+                }
 
-            Label {
-                text: i18n.tr("Your Pebble smartwatch is in factory mode and needs to be initialized.")
-                width: parent.width - units.gu(4)
-                anchors.horizontalCenter: parent.horizontalCenter
-                wrapMode: Text.WordWrap
-                visible: root.pebble.connected && root.pebble.recovery && !root.pebble.upgradingFirmware
-                fontSize: "large"
-                horizontalAlignment: Text.AlignHCenter
-            }
-            Button {
-                text: i18n.tr("Initialize Pebble")
-                onClicked: root.pebble.performFirmwareUpgrade();
-                visible: root.pebble.connected && root.pebble.recovery && !root.pebble.upgradingFirmware
-                color: UbuntuColors.orange
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
+                Label {
+                    text: qsTr("Your Pebble smartwatch is in factory mode and needs to be initialized.")
+                    width: parent.width - units.gu(4)
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    wrapMode: Text.WordWrap
+                    visible: root.pebble.connected && root.pebble.recovery && !root.pebble.upgradingFirmware
+                    font.pixelSize: Theme.fontSizeLarge
+                    horizontalAlignment: Text.AlignHCenter
+                }
+                Button {
+                    text: qsTr("Initialize Pebble")
+                    onClicked: root.pebble.performFirmwareUpgrade();
+                    visible: root.pebble.connected && root.pebble.recovery && !root.pebble.upgradingFirmware
+                    color: "orange"
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
 
-            Rectangle {
-                id: upgradeIcon
-                height: units.gu(10)
-                width: height
-                radius: width / 2
-                color: UbuntuColors.orange
-                anchors.horizontalCenter: parent.horizontalCenter
-                Icon {
-                    anchors.fill: parent
-                    anchors.margins: units.gu(1)
-                    name: "preferences-system-updates-symbolic"
-                    color: "white"
+                Rectangle {
+                    id: upgradeIcon
+                    height: units.gu(10)
+                    width: height
+                    radius: width / 2
+                    color: Theme.highlightColor
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    BusyIndicator {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        running: upgradeInProgress
+                        size: BusyIndicatorSize.Large
+                    }
+                    visible: root.pebble.connected && root.pebble.upgradingFirmware
                 }
 
-                RotationAnimation on rotation {
-                    duration: 2000
-                    loops: Animation.Infinite
-                    from: 0
-                    to: 360
-                    running: upgradeIcon.visible
+                Label {
+                    text: qsTr("Upgrading...")
+                    font.pixelSize: Theme.fontSizeLarge
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    visible: root.pebble.connected && root.pebble.upgradingFirmware
                 }
-                visible: root.pebble.connected && root.pebble.upgradingFirmware
-            }
 
-            Label {
-                text: i18n.tr("Upgrading...")
-                fontSize: "large"
-                anchors.horizontalCenter: parent.horizontalCenter
-                visible: root.pebble.connected && root.pebble.upgradingFirmware
-            }
+                Repeater {
+                    id: menuRepeater
+                    model: root.pebble.connected && !root.pebble.recovery && !root.pebble.upgradingFirmware ? mainMenuModel : null
+                    delegate: ListItem {
+
+                        Row {
+                            anchors.fill: parent
+                            anchors.margins: units.gu(1)
 
-            Repeater {
-                id: menuRepeater
-                model: root.pebble.connected && !root.pebble.recovery && !root.pebble.upgradingFirmware ? mainMenuModel : null
-                delegate: ListItem {
-
-                    RowLayout {
-                        anchors.fill: parent
-                        anchors.margins: units.gu(1)
-
-                        UbuntuShape {
-                            Layout.fillHeight: true
-                            Layout.preferredWidth: height
-                            backgroundColor: model.color
-                            Icon {
-                                anchors.fill: parent
-                                anchors.margins: units.gu(.5)
-                                name: model.icon
-                                color: "white"
+                            Rectangle {
+                                //Layout.fillHeight: true
+                                //Layout.preferredWidth: height
+                                //backgroundColor: model.color
+                                Image {
+                                    anchors.fill: parent
+                                    anchors.margins: units.gu(.5)
+                                    source: model.icon
+                                }
                             }
-                        }
 
 
-                        Label {
-                            text: model.text
-                            Layout.fillWidth: true
+                            Label {
+                                text: model.text
+                                width: page.width
+                            }
                         }
-                    }
 
-                    onClicked: {
-                        var options = {};
-                        options["pebble"] = root.pebble
-                        var modelItem = mainMenuModel.get(index)
-                        options["showWatchApps"] = modelItem.showWatchApps
-                        options["showWatchFaces"] = modelItem.showWatchFaces
-                        pageStack.push(Qt.resolvedUrl(model.page), options)
+                        onClicked: {
+                            var options = {};
+                            options["pebble"] = root.pebble
+                            var modelItem = mainMenuModel.get(index)
+                            options["showWatchApps"] = modelItem.showWatchApps
+                            options["showWatchFaces"] = modelItem.showWatchFaces
+                            pageStack.push(Qt.resolvedUrl(model.page), options)
+                        }
                     }
                 }
             }
         }
     }
-
     Connections {
         target: pebble
         onOpenURL: {
diff --git a/rockwork/qml/NotificationsPage.qml b/rockwork/qml/NotificationsPage.qml
index 9802b05..3942ecf 100644
--- a/rockwork/qml/NotificationsPage.qml
+++ b/rockwork/qml/NotificationsPage.qml
@@ -1,84 +1,95 @@
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
-import RockWork 1.0
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 Page {
     id: root
-    title: i18n.tr("Notifications")
 
     property var pebble: null
 
-    ColumnLayout {
+    SilicaFlickable {
+        id: flickable
         anchors.fill: parent
-        anchors.topMargin: units.gu(1)
+        contentHeight: column.height
+        PageHeader {
+            title: qsTr("Notifications")
+        }
+        Column {
 
-        Item {
-            Layout.fillWidth: true
-            implicitHeight: infoLabel.height
+            anchors.fill: parent
+            anchors.topMargin: units.gu(1)
 
-            Label {
-                id: infoLabel
-                anchors {
-                    left: parent.left
-                    right: parent.right
-                    margins: units.gu(2)
-                }
 
-                wrapMode: Text.WordWrap
-                text: i18n.tr("Entries here will be added as notifications appear on the phone. Selected notifications will be shown on your Pebble smartwatch.")
+
+            Item {
+                width: parent.width
+                implicitHeight: infoLabel.height
+
+                Label {
+                    id: infoLabel
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        margins: units.gu(2)
+                    }
+
+                    wrapMode: Text.WordWrap
+                    text: i18n.tr("Entries here will be added as notifications appear on the phone. Selected notifications will be shown on your Pebble smartwatch.")
+                }
             }
-        }
 
 
-        ListView {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            clip: true
-            model: root.pebble.notifications
+            ListView {
+                width: parent.width
+                //Layout.fillHeight: true
+                clip: true
+                model: root.pebble.notifications
 
-            delegate: ListItem {
-                ListItemLayout {
-                    title.text: model.name
+                delegate: ListItem {
+                    Item {
+                        Rectangle {
+                            //SlotsLayout.position: SlotsLayout.Leading;
+                            height: units.gu(5)
+                            width: height
+                            color: {
+                                // Add some hacks for known icons
+                                switch (model.icon) {
+                                case "calendar":
+                                    return "orange";
+                                case "settings":
+                                    return "grey";
+                                case "dialog-question-symbolic":
+                                    return "red";
+                                case "alarm-clock":
+                                    return "purple";
+                                case "gpm-battery-050":
+                                    return "green";
+                                }
+                                return "black"
+                            }
+                            //                        source: Image {
+                            //                            height: parent.height
+                            //                            width: parent.width
+                            //                            source: model.icon.indexOf("/") === 0 ? "file://" + model.icon : ""
+                            //                        }
+                            Label {
+                                text: model.name
+                            }
 
-                    UbuntuShape {
-                        SlotsLayout.position: SlotsLayout.Leading;
-                        height: units.gu(5)
-                        width: height
-                        backgroundColor: {
-                            // Add some hacks for known icons
-                            switch (model.icon) {
-                            case "calendar":
-                                return UbuntuColors.orange;
-                            case "settings":
-                                return "grey";
-                            case "dialog-question-symbolic":
-                                return UbuntuColors.red;
-                            case "alarm-clock":
-                                return UbuntuColors.purple;
-                            case "gpm-battery-050":
-                                return UbuntuColors.green;
+                            IconButton {
+                                anchors.fill: parent
+                                anchors.margins: units.gu(.5)
+                                icon.source: model.icon.indexOf("/") !== 0 ? model.icon : ""
+                                //color: "white"
                             }
-                            return "black"
-                        }
-                        source: Image {
-                            height: parent.height
-                            width: parent.width
-                            source: model.icon.indexOf("/") === 0 ? "file://" + model.icon : ""
                         }
-                        Icon {
-                            anchors.fill: parent
-                            anchors.margins: units.gu(.5)
-                            name: model.icon.indexOf("/") !== 0 ? model.icon : ""
-                            color: "white"
-                        }
-                    }
 
-                    Switch {
-                        checked: model.enabled
-                        SlotsLayout.position: SlotsLayout.Trailing;
-                        onClicked: {
-                            root.pebble.setNotificationFilter(model.name, checked)
+                        Switch {
+                            checked: model.enabled
+                            // SlotsLayout.position: SlotsLayout.Trailing;
+                            onClicked: {
+                                root.pebble.setNotificationFilter(model.name, checked)
+                            }
                         }
                     }
                 }
diff --git a/rockwork/qml/PebbleModels.qml b/rockwork/qml/PebbleModels.qml
index 103064a..d2248c1 100644
--- a/rockwork/qml/PebbleModels.qml
+++ b/rockwork/qml/PebbleModels.qml
@@ -1,28 +1,28 @@
-import QtQuick 2.4
+import QtQuick 2.0
 
 ListModel {
     id: modelModel
-    ListElement { image: 'artwork/tintin-black.png'; shape: "rectangle" } // Fallback for Unknown
-    ListElement { image: 'artwork/tintin-black.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/tintin-white.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/tintin-red.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/tintin-orange.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/tintin-grey.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/bianca-silver.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/bianca-black.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/tintin-blue.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/tintin-green.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/tintin-pink.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/snowy-white.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/snowy-black.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/snowy-red.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/bobby-silver.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/bobby-black.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/bobby-gold.png'; shape: "rectangle" }
-    ListElement { image: 'artwork/spalding-14mm-silver.png'; shape: "round" }
-    ListElement { image: 'artwork/spalding-14mm-black.png'; shape: "round" }
-    ListElement { image: 'artwork/spalding-20mm-silver.png'; shape: "round" }
-    ListElement { image: 'artwork/spalding-20mm-black.png'; shape: "round" }
-    ListElement { image: 'artwork/spalding-14mm-rose-gold.png'; shape: "round" }
+    ListElement { image: 'tintin-black.png'; shape: "rectangle" } // Fallback for Unknown
+    ListElement { image: 'tintin-black.png'; shape: "rectangle" }
+    ListElement { image: 'tintin-white.png'; shape: "rectangle" }
+    ListElement { image: 'tintin-red.png'; shape: "rectangle" }
+    ListElement { image: 'tintin-orange.png'; shape: "rectangle" }
+    ListElement { image: 'tintin-grey.png'; shape: "rectangle" }
+    ListElement { image: 'bianca-silver.png'; shape: "rectangle" }
+    ListElement { image: 'bianca-black.png'; shape: "rectangle" }
+    ListElement { image: 'tintin-blue.png'; shape: "rectangle" }
+    ListElement { image: 'tintin-green.png'; shape: "rectangle" }
+    ListElement { image: 'tintin-pink.png'; shape: "rectangle" }
+    ListElement { image: 'snowy-white.png'; shape: "rectangle" }
+    ListElement { image: 'snowy-black.png'; shape: "rectangle" }
+    ListElement { image: 'snowy-red.png'; shape: "rectangle" }
+    ListElement { image: 'bobby-silver.png'; shape: "rectangle" }
+    ListElement { image: 'bobby-black.png'; shape: "rectangle" }
+    ListElement { image: 'bobby-gold.png'; shape: "rectangle" }
+    ListElement { image: 'spalding-14mm-silver.png'; shape: "round" }
+    ListElement { image: 'spalding-14mm-black.png'; shape: "round" }
+    ListElement { image: 'spalding-20mm-silver.png'; shape: "round" }
+    ListElement { image: 'spalding-20mm-black.png'; shape: "round" }
+    ListElement { image: 'spalding-14mm-rose-gold.png'; shape: "round" }
 }
 
diff --git a/rockwork/qml/PebblesPage.qml b/rockwork/qml/PebblesPage.qml
index a973b0a..13aca60 100644
--- a/rockwork/qml/PebblesPage.qml
+++ b/rockwork/qml/PebblesPage.qml
@@ -1,6 +1,6 @@
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 Page {
     title: i18n.tr("Manage Pebble Watches")
diff --git a/rockwork/qml/ScreenshotsPage.qml b/rockwork/qml/ScreenshotsPage.qml
index fdbeb9a..28ca866 100644
--- a/rockwork/qml/ScreenshotsPage.qml
+++ b/rockwork/qml/ScreenshotsPage.qml
@@ -1,9 +1,6 @@
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
-import Ubuntu.Components.Popups 1.3
-import Ubuntu.Content 1.3
-import RockWork 1.0
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 Page {
     id: root
diff --git a/rockwork/qml/SettingsPage.qml b/rockwork/qml/SettingsPage.qml
index 153aaf4..8116f7a 100644
--- a/rockwork/qml/SettingsPage.qml
+++ b/rockwork/qml/SettingsPage.qml
@@ -1,7 +1,6 @@
-import QtQuick 2.4
-import QtQuick.Layouts 1.1
-import Ubuntu.Components 1.3
-import Ubuntu.Components.ListItems 1.3
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 Page {
     id: root
diff --git a/rockwork/qml/SystemAppIcon.qml b/rockwork/qml/SystemAppIcon.qml
index 88e37bc..3823cf2 100644
--- a/rockwork/qml/SystemAppIcon.qml
+++ b/rockwork/qml/SystemAppIcon.qml
@@ -1,5 +1,6 @@
-import QtQuick 2.4
-import Ubuntu.Components 1.3
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import RockPool 1.0
 
 Item {
     id: root
@@ -8,10 +9,10 @@ Item {
     property string uuid: ""
     property string iconSource: ""
 
-    UbuntuShape {
+    Rectangle {
         anchors.fill: parent
         visible: root.isSystemApp
-        backgroundColor: {
+        color: {
             switch (root.uuid) {
             case "{07e0d9cb-8957-4bf7-9d42-35bf47caadfe}":
                 return "gray";
@@ -32,28 +33,27 @@ Item {
             return "";
         }
     }
-    Icon {
+    IconButton {
         anchors.fill: parent
         implicitHeight: height
-        anchors.margins: units.gu(1)
+        //anchors.margins: units.gu(1)
         visible: root.isSystemApp
-        color: "white"
-        name: {
+        icon.source: {
             switch (root.uuid) {
             case "{07e0d9cb-8957-4bf7-9d42-35bf47caadfe}":
-                return "settings";
+                return "image://theme/icon-m-developer-mode";
             case "{18e443ce-38fd-47c8-84d5-6d0c775fbe55}":
-                return "clock-app-symbolic";
+                return "image://theme/icon-m-clock";
             case "{36d8c6ed-4c83-4fa1-a9e2-8f12dc941f8c}":
-                return "like";
+                return "image://theme/icon-m-like";
             case "{1f03293d-47af-4f28-b960-f2b02a6dd757}":
-                return "stock_music";
+                return "image://theme/icon-m-music";
             case "{b2cae818-10f8-46df-ad2b-98ad2254a3c1}":
-                return "stock_notification";
+                return "image://theme/icon-m-notifications";
             case "{67a32d95-ef69-46d4-a0b9-854cc62f97f9}":
-                return "stock_alarm-clock";
+                return "image://theme/icon-m-alarm";
             case "{8f3c8686-31a1-4f5f-91f5-01600c9bdc59}":
-                return "clock-app-symbolic";
+                return "image://theme/icon-m-clock";
             }
             return "";
         }