feat(StatusListItem): introduce primary and secondary types

Also enable `icon.rotation` via `StatusIconSettings.

ui/StatusQ/src/StatusQ/Components/StatusListItem.qml

@@ -10,7 +10,20 @@ Rectangle {
     implicitWidth: 448
     implicitHeight: 64
 
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusListItem.backgroundColor
+    enum Type {
+        Primary,
+        Secondary
+    }
+
+    color: {
+        if (sensor.containsMouse) {
+            return type === StatusListItem.Type.Primary ?
+                Theme.palette.baseColor2 :
+                Theme.palette.statusListItem.secondaryHoverBackgroundColor
+        }
+        return Theme.palette.statusListItem.backgroundColor
+    }
+
     radius: 8
 
     property string title: ""
@@ -20,10 +33,13 @@ Rectangle {
     property StatusIconSettings icon: StatusIconSettings {
         height: 20
         width: 20
+        rotation: 0
         background: StatusIconBackgroundSettings {
             width: 40
             height: 40
-            color: Theme.palette.primaryColor3
+            color: type === StatusListItem.Type.Primary ? 
+                Theme.palette.primaryColor3 :
+                "transparent"
         }
     }
     property StatusImageSettings image: StatusImageSettings {
@@ -32,6 +48,8 @@ Rectangle {
     }
     property string label: ""
 
+    property int type: StatusListItem.Type.Primary
+
     property alias sensor: sensor
     property alias statusListItemTitle: statusListItemTitle
     property alias statusListItemSubTitle: statusListItemSubTitle
@@ -70,6 +88,7 @@ Rectangle {
                 icon.width: statusListItem.icon.width
                 icon.height: statusListItem.icon.height
                 icon.name: statusListItem.icon.name
+                icon.rotation: statusListItem.icon.rotation
                 color: statusListItem.icon.background.color
                 width: statusListItem.icon.background.width
                 height: statusListItem.icon.background.height
@@ -95,7 +114,12 @@ Rectangle {
                 id: statusListItemTitle
                 text: statusListItem.title
                 font.pixelSize: 15
-                color: Theme.palette.directColor1
+                color: {
+                  if (statusListItem.type === StatusListItem.Type.Primary) {
+                      return Theme.palette.directColor1
+                  }
+                  return Theme.palette.primaryColor1
+                }
             }
 
             StatusBaseText {

ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml

@@ -8,6 +8,7 @@ Rectangle {
     property StatusIconSettings icon: StatusIconSettings {
         width: 24
         height: 24
+        rotation: 0
         background: StatusIconBackgroundSettings {
             width: 40
             height: 40
@@ -30,5 +31,6 @@ Rectangle {
 
         color: Theme.palette.primaryColor1
         icon: statusRoundedIcon.icon.name
+        rotation: statusRoundedIcon.icon.rotation
     }
 }

ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml

@@ -13,6 +13,7 @@ QtObject {
         'blue3': '#88B0FF',
         'blue4': '#869EFF',
         'blue5': '#AAC6FF',
+        'blue6': '#ECEFFC',
 
         'brown': '#8B3131',
         'brown2': '#9B832F',

ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -132,6 +132,7 @@ ThemePalette {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor: baseColor3
+        property color secondaryHoverBackgroundColor: primaryColor3
     }
 
     property QtObject statusChatListItem: QtObject {

ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -130,6 +130,7 @@ ThemePalette {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor: white
+        property color secondaryHoverBackgroundColor: getColor('blue6')
     }
 
     property QtObject statusChatListItem: QtObject {

ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml

@@ -91,6 +91,7 @@ QtObject {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor
+        property color secondaryHoverBackgroundColor
     }
 
     property QtObject statusChatListItem: QtObject {