Improve flat buttons in share delegates

Signed-off-by: Claudio Cambra <claudio.cambra@nextcloud.com>

src/gui/filedetails/ShareDelegate.qml

@@ -235,20 +235,22 @@ GridLayout {
         Layout.column: 2
         Layout.rowSpan: root.rows
         Layout.fillHeight: true
+
         spacing: 0
 
-        Button {
+        CustomButton {
             id: createLinkButton
 
             Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: icon.width + (Style.standardSpacing * 2)
+            Layout.preferredWidth: Style.iconButtonWidth
+            Layout.preferredHeight: width
 
-            flat: true
-            display: AbstractButton.IconOnly
-            icon.color: Style.ncTextColor
-            icon.source: "qrc:///client/theme/add.svg"
-            icon.width: 16
-            icon.height: 16
+            toolTipText: qsTr("Create a new share link")
+
+            bgColor: Style.lightHover
+            bgNormalOpacity: 0
+
+            imageSource: "qrc:///client/theme/add.svg"
 
             visible: root.isPlaceholderLinkShare && root.canCreateLinkShares
             enabled: visible
@@ -256,16 +258,19 @@ GridLayout {
             onClicked: root.createNewLinkShare()
         }
 
-        Button {
+        CustomButton {
             id: copyLinkButton
 
             Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: icon.width + (Style.standardSpacing * 2)
+            Layout.preferredWidth: Style.iconButtonWidth
+            Layout.preferredHeight: width
 
-            flat: true
-            display: AbstractButton.IconOnly
-            icon.color: Style.ncTextColor
-            icon.source: "qrc:///client/theme/copy.svg"
+            toolTipText: qsTr("Copy share link location")
+
+            bgColor: Style.lightHover
+            bgNormalOpacity: 0
+
+            imageSource: "qrc:///client/theme/copy.svg"
             icon.width: 16
             icon.height: 16
 
@@ -282,18 +287,19 @@ GridLayout {
             TextEdit { id: clipboardHelper; visible: false}
         }
 
-        Button {
+        CustomButton {
             id: moreButton
 
             Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: icon.width + (Style.standardSpacing * 2)
+            Layout.preferredWidth: Style.iconButtonWidth
+            Layout.preferredHeight: width
 
-            flat: true
-            display: AbstractButton.IconOnly
-            icon.color: Style.ncTextColor
-            icon.source: "qrc:///client/theme/more.svg"
-            icon.width: 16
-            icon.height: 16
+            toolTipText: qsTr("Share options")
+
+            bgColor: Style.lightHover
+            bgNormalOpacity: 0
+
+            imageSource: "qrc:///client/theme/more.svg"
 
             visible: !root.isPlaceholderLinkShare
             enabled: visible

src/gui/tray/CustomButton.qml

@@ -7,7 +7,8 @@ Button {
     id: root
 
     property string imageSource: ""
-    property string imageSourceHover: ""
+    property string imageSourceHover: imageSource
+    property var iconItem: icon
 
     property string toolTipText: ""
 

theme/Style/Style.qml

@@ -51,6 +51,8 @@ QtObject {
     property int standardSpacing: 10
     property int smallSpacing: 5
 
+    property int iconButtonWidth: 36
+
     property int minActivityHeight: variableSize(40)
 
     property int currentAccountButtonWidth: 220