Redesign timeline

Remove border von bubbles and only hilight the bubble on hover

src/qml/Component/Timeline/ReactionDelegate.qml

@@ -50,10 +50,10 @@ Flow {
                 Kirigami.Theme.inherit: false
                 Kirigami.Theme.colorSet: Kirigami.Theme.View
                 radius: height / 2
-                shadow.size: Kirigami.Units.smallSpacing
-                shadow.color: !model.hasLocalUser ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
-                border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
-                border.width: 1
+                shadow {
+                    size: Kirigami.Units.smallSpacing
+                    color: !model.hasLocalUser ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
+                }
             }
 
             onClicked: reactionClicked(model.reaction)

src/qml/Component/Timeline/TimelineContainer.qml

@@ -520,7 +520,9 @@ ColumnLayout {
                     anchors.fill: parent
                     Kirigami.Theme.colorSet: Kirigami.Theme.View
                     color: {
-                        if (root.author.isLocalUser) {
+                        if (mainContainer.hovered) {
+                            return Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15)
+                        } else if (root.author.isLocalUser) {
                             return Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15)
                         } else if (root.showHighlight) {
                             return Kirigami.Theme.positiveBackgroundColor
@@ -528,11 +530,11 @@ ColumnLayout {
                             return Kirigami.Theme.backgroundColor
                         }
                     }
-                    radius: Kirigami.Units.smallSpacing
-                    shadow.size: Kirigami.Units.smallSpacing
-                    shadow.color: root.showHighlight ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
-                    border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15)
-                    border.width: 1
+                    radius: Kirigami.Units.largeSpacing
+                    shadow {
+                        size: Kirigami.Units.smallSpacing
+                        color: root.isHighlighted ? Qt.rgba(0.0, 0.0, 0.0, 0.10) : Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10)
+                    }
 
                     Behavior on color {
                         enabled: isTemporaryHighlighted
@@ -543,7 +545,7 @@ ColumnLayout {
         }
 
         background: Rectangle {
-            visible: mainContainer.hovered
+            visible: mainContainer.hovered && Config.compactLayout
             color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15)
             radius: Kirigami.Units.smallSpacing
         }