Improve UI

src/qml/AboutPage.qml

@@ -36,6 +36,10 @@ ItemPage {
                 rightPadding: FishUI.Units.largeSpacing * 2
             }
 
+            Item {
+                height: FishUI.Units.largeSpacing
+            }
+
 //            Label {
 //                text: qsTr("Built on ") + about.prettyProductName
 //                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
@@ -43,6 +47,7 @@ ItemPage {
 //                color: FishUI.Theme.disabledTextColor
 //            }
 
+            RoundedItem {
                 StandardItem {
                     key: qsTr("System Version")
                     value: "0.2"
@@ -74,4 +79,5 @@ ItemPage {
                 }
             }
         }
+    }
 }

src/qml/AccountsPage.qml

@@ -32,6 +32,8 @@ ItemPage {
             id: layout
             anchors.fill: parent
 
+            RoundedItem {
+
                 ListView {
                     id: _userView
                     model: userModel
@@ -72,4 +74,5 @@ ItemPage {
                 }
             }
         }
+    }
 }

src/qml/AppearancePage.qml

@@ -47,7 +47,9 @@ ItemPage {
             id: layout
             anchors.fill: parent
             anchors.bottomMargin: FishUI.Units.largeSpacing
+            spacing: FishUI.Units.largeSpacing * 2
 
+            RoundedItem {
                 Label {
                     text: qsTr("Theme")
                     color: FishUI.Theme.disabledTextColor
@@ -97,9 +99,9 @@ ItemPage {
                         onCheckedChanged: appearance.setDimsWallpaper(checked)
                     }
                 }
+            }
 
-            HorizontalDivider {}
+            RoundedItem {
-
                 Label {
                     text: qsTr("Accent color")
                     color: FishUI.Theme.disabledTextColor
@@ -175,9 +177,9 @@ ItemPage {
                         }
                     }
                 }
+            }
 
-            HorizontalDivider {}
+            RoundedItem {
-
                 // Font
                 Label {
                     text: qsTr("Font")
@@ -278,6 +280,7 @@ ItemPage {
                         }
                     }
                 }
+            }
 
             Item {
                 Layout.fillHeight: true

src/qml/BatteryPage.qml

@@ -44,7 +44,7 @@ ItemPage {
         ColumnLayout {
             id: layout
             anchors.fill: parent
-            spacing: FishUI.Units.largeSpacing
+            spacing: FishUI.Units.largeSpacing * 2
 
             // Battery Info
             BatteryItem {
@@ -98,10 +98,7 @@ ItemPage {
                 }
             }
 
-            Item {
+            RoundedItem {
-                height: FishUI.Units.largeSpacing
-            }
-
                 Label {
                     text: qsTr("History")
                     color: FishUI.Theme.disabledTextColor
@@ -146,11 +143,9 @@ ItemPage {
                     yStep: batteryPage.historyType === BatteryHistoryModel.RateType ? 10 : 20
                     visible: history.count > 1
                 }
-
-            Item {
-                height: FishUI.Units.smallSpacing
             }
 
+            RoundedItem {
                 StandardItem {
                     key: qsTr("Last Charged to") + " " + battery.lastChargedPercent + "%"
                     value: battery.lastChargedTime
@@ -162,6 +157,11 @@ ItemPage {
                     value: battery.capacity + "%"
                 }
             }
+
+            Item {
+                height: FishUI.Units.largeSpacing
+            }
+        }
     }
 
     Label {

src/qml/DisplayPage.qml

@@ -35,6 +35,10 @@ ItemPage {
         ColumnLayout {
             id: layout
             anchors.fill: parent
+            spacing: FishUI.Units.largeSpacing * 2
+
+            RoundedItem {
+                Layout.fillWidth: true
 
                 Label {
                     text: qsTr("Brightness")
@@ -75,14 +79,11 @@ ItemPage {
                 }
 
                 Item {
-                height: FishUI.Units.largeSpacing
+                    height: FishUI.Units.smallSpacing
-                visible: brightness.enabled
                 }
-
-            HorizontalDivider {
-                visible: brightness.enabled
             }
 
+            RoundedItem {
                 Label {
                     text: qsTr("Screen")
                     color: FishUI.Theme.disabledTextColor
@@ -211,9 +212,9 @@ ItemPage {
                     interactive: true
                     visible: count > 1
                 }
+            }
 
-            HorizontalDivider { }
+            RoundedItem {
-
                 Label {
                     text: qsTr("Scale")
                     color: FishUI.Theme.disabledTextColor
@@ -287,6 +288,7 @@ ItemPage {
                         appearance.setDevicePixelRatio(value)
                     }
                 }
+            }
 
             Item {
                 Layout.fillHeight: true

src/qml/DockPage.qml

@@ -18,7 +18,9 @@ ItemPage {
         ColumnLayout {
             id: layout
             anchors.fill: parent
+            spacing: FishUI.Units.largeSpacing * 2
 
+            RoundedItem {
                 // Dock
                 Label {
                     text: qsTr("Position on screen")
@@ -50,9 +52,9 @@ ItemPage {
                         onClicked: appearance.setDockDirection(2)
                     }
                 }
+            }
 
-            HorizontalDivider {}
+            RoundedItem {
-
                 Label {
                     text: qsTr("Size")
                     color: FishUI.Theme.disabledTextColor
@@ -116,6 +118,7 @@ ItemPage {
                         appearance.setDockIconSize(iconSize)
                     }
                 }
+            }
 
             Item {
                 Layout.fillHeight: true

src/qml/NetworkPage/WifiView.qml

@@ -54,9 +54,10 @@ Item {
         ListView {
             id: wirelessView
             Layout.fillWidth: true
-            Layout.preferredHeight: itemHeight * count
+            Layout.preferredHeight: itemHeight * count + ((count - 1) * FishUI.Units.smallSpacing)
             clip: true
             model: appletProxyModel
+            spacing: FishUI.Units.smallSpacing
             interactive: false
 
             visible: enabledConnections.wirelessEnabled

src/qml/NetworkPage/main.qml

@@ -97,10 +97,12 @@ ItemPage {
                 visible: wiredView.visible && enabledConnections.wirelessHwEnabled
             }
 
+            RoundedItem {
                 WifiView {
                     Layout.fillWidth: true
                     visible: enabledConnections.wirelessHwEnabled
                 }
             }
         }
+    }
 }

src/qml/RoundedItem.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import FishUI 1.0 as FishUI
+
+Rectangle {
+    Layout.fillWidth: true
+
+    default property alias content : _mainLayout.data
+
+    color: FishUI.Theme.darkMode ? "#363636" : "#FFFFFF"
+    radius: FishUI.Theme.mediumRadius
+
+    implicitHeight: _mainLayout.implicitHeight + FishUI.Units.largeSpacing * 2
+
+    ColumnLayout {
+        id: _mainLayout
+        anchors.fill: parent
+
+        anchors.leftMargin: FishUI.Units.largeSpacing * 1.5
+        anchors.rightMargin: FishUI.Units.largeSpacing * 1.5
+        anchors.topMargin: FishUI.Units.largeSpacing
+        anchors.bottomMargin: FishUI.Units.largeSpacing
+    }
+}

src/qml/SideBar.qml

@@ -15,7 +15,7 @@ Item {
 
     Rectangle {
         anchors.fill: parent
-        color: FishUI.Theme.secondBackgroundColor
+        color: FishUI.Theme.backgroundColor
 
         Behavior on color {
             ColorAnimation {

src/qml/main.qml

@@ -16,6 +16,9 @@ FishUI.Window {
     minimumHeight: 600
     headerBarHeight: 50
 
+    backgroundColor: FishUI.Theme.darkMode ? Qt.rgba(38 / 255, 38 / 255, 38 / 255, 255)
+                                           : Qt.rgba(237 / 255, 237 / 255, 242 / 255, 255)
+
     headerBar: Item {
         Rectangle {
             id: leftArea
@@ -23,7 +26,7 @@ FishUI.Window {
             anchors.top: parent.top
             anchors.bottom: parent.bottom
             implicitWidth: sideBar.width
-            color: FishUI.Theme.secondBackgroundColor
+            color: FishUI.Theme.backgroundColor
 
             Behavior on color {
                 ColorAnimation {

src/resources.qrc

@@ -86,5 +86,6 @@
         <file>qml/NetworkPage/WifiItem.qml</file>
         <file>qml/NetworkPage/WirelessDetailsDialog.qml</file>
         <file>qml/NetworkPage/WiredItem.qml</file>
+        <file>qml/RoundedItem.qml</file>
     </qresource>
 </RCC>