Merge pull request #7101 from nextcloud/bugfix/native-ui

Fix native UI

src/gui/PredefinedStatusButton.qml

@@ -36,7 +36,8 @@ AbstractButton {
 
     background: Rectangle {
         color: root.hovered || root.checked ? palette.highlight : palette.base
-        radius: Style.slightlyRoundedButtonRadius
+        // TODO: fix radius borders - they were showing for each item
+        // radius: Style.slightlyRoundedButtonRadius
     }
 
     contentItem: Row {

src/gui/UserStatusSelector.qml

@@ -186,7 +186,7 @@ ColumnLayout {
                 anchors.centerIn: Overlay.overlay
 
                 background: Rectangle {
-                    color: palette.toolTipBase
+                    color: palette.window
                     border.width: Style.normalBorderWidth
                     border.color: palette.dark
                     radius: Style.slightlyRoundedButtonRadius

src/gui/filedetails/FileDetailsPage.qml

@@ -224,7 +224,6 @@ Page {
             NCTabButton {
                 svgCustomColorSource: "image://svgimage-custom-color/activity.svg"
                 text: qsTr("Activity")
-                accentColor: root.accentColor
                 checked: swipeView.currentIndex === fileActivityView.swipeIndex
                 onClicked: swipeView.currentIndex = fileActivityView.swipeIndex
             }
@@ -234,7 +233,6 @@ Page {
                 height: visible ? implicitHeight : 0
                 svgCustomColorSource: "image://svgimage-custom-color/share.svg"
                 text: qsTr("Sharing")
-                accentColor: root.accentColor
                 checked: swipeView.currentIndex === shareViewLoader.swipeIndex
                 onClicked: swipeView.currentIndex = shareViewLoader.swipeIndex
                 visible: root.fileDetails.sharingAvailable

src/gui/filedetails/FileDetailsView.qml

@@ -37,8 +37,8 @@ StackView {
 
     initialItem: FileDetailsPage {
         id: fileDetailsPage
-        width: parent.width
-        height: parent.height
+        width: root.width
+        height: root.height
         backgroundsVisible: root.backgroundsVisible
         rootStackView: root
         onCloseButtonClicked: root.closeButtonClicked()

src/gui/filedetails/NCInputTextEdit.qml

@@ -22,7 +22,7 @@ import Style
 TextEdit {
     id: root
 
-    readonly property color accentColor: Style.ncBlue
+    readonly property color accentColor: palette.highlight
     readonly property color secondaryColor: palette.dark
     readonly property alias submitButton: submitButton
 
@@ -33,6 +33,16 @@ TextEdit {
     selectByMouse: true
     height: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight)
 
+    Rectangle {
+        id: textFieldBorder
+        anchors.fill: parent
+        radius: Style.trayWindowRadius
+        border.width: Style.normalBorderWidth
+        border.color: root.activeFocus ? root.accentColor : root.secondaryColor
+        color: palette.window
+        z: -1
+    }
+
     Button {
         id: submitButton
 

src/gui/filedetails/NCInputTextField.qml

@@ -27,7 +27,7 @@ TextField {
     readonly property alias submitButton: submitButton
     property bool validInput: true
 
-    implicitHeight: Style.talkReplyTextFieldPreferredHeight
+    implicitHeight: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight)
 
     rightPadding: submitButton.width
 
@@ -52,5 +52,12 @@ TextField {
 
         onClicked: root.accepted()
     }
+
+    verticalAlignment: Qt.AlignVCenter
+    background: Rectangle {
+        border.color: palette.dark
+        radius: Style.trayWindowRadius
+        color: palette.window
+    }
 }
 

src/gui/filedetails/NCTabButton.qml

@@ -25,7 +25,6 @@ TabButton {
     id: tabButton
 
     property string svgCustomColorSource: ""
-    property color accentColor: Style.ncBlue
 
     padding: Style.smallSpacing
     background: Rectangle {
@@ -36,7 +35,7 @@ TabButton {
     contentItem: ColumnLayout {
         id: tabButtonLayout
 
-        property var elementColors: tabButton.checked || tabButton.hovered ? palette.buttonText : palette.midlight
+        property var elementColors: tabButton.checked || tabButton.hovered ? palette.buttonText : palette.windowText
 
         // We'd like to just set the height of the Image, but this causes crashing.
         // So we use a wrapping Item and use anchors to adjust the size.
@@ -82,7 +81,7 @@ TabButton {
             implicitWidth: textWidth + Style.standardSpacing * 2
             implicitHeight: 2
 
-            color: tabButton.checked ? tabButton.accentColor : tabButton.hovered ? palette.highlight : palette.base
+            color: tabButton.checked || tabButton.hovered ?  palette.highlight : palette.base
         }
     }
 }

src/gui/filedetails/ShareeSearchField.qml

@@ -47,6 +47,14 @@ TextField {
 
     placeholderText: enabled ? qsTr("Search for users or groups…") : qsTr("Sharing is not available for this folder")
     placeholderTextColor: placeholderColor
+    verticalAlignment: Qt.AlignVCenter
+    implicitHeight: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight)
+
+    background: Rectangle {
+        border.color: palette.dark
+        radius: Style.trayWindowRadius
+        color: palette.window
+    }
 
     onActiveFocusChanged: triggerSuggestionsVisibility()
     onTextChanged: triggerSuggestionsVisibility()

src/gui/iconutils.cpp

@@ -111,7 +111,7 @@ QImage createSvgImageWithCustomColor(const QString &fileName,
     const auto sizeToUse = requestedSize.isValid() || originalSize == nullptr ? requestedSize : *originalSize;
 
     // some icons are present in white or black only, so, we need to check both when needed
-    const auto iconBaseColors = QStringList{QStringLiteral("black"), QStringLiteral("white")};
+    const auto iconBaseColors = QStringList{QStringLiteral("black"), QStringLiteral("white"), QStringLiteral("colored")};
     const auto customColorImage = findImageWithCustomColor(fileName, customColor, iconBaseColors, sizeToUse);
 
     if (!customColorImage.isNull()) {

src/gui/tray/CallNotificationDialog.qml

@@ -75,11 +75,10 @@ ApplicationWindow {
         onStopNotifying: root.closeNotification()
     }
 
-    Audio {
+    SoundEffect  {
         id: ringSound
         source: root.ringtonePath
         loops: 9 // about 45 seconds of audio playing
-        audioRole: Audio.RingtoneRole
     }
 
     Rectangle {

src/gui/tray/TalkReplyTextField.qml

@@ -17,6 +17,13 @@ TextField {
 
     onAccepted: sendReplyMessage()
 
+    verticalAlignment: Qt.AlignVCenter
+    background: Rectangle {
+        border.color: palette.dark
+        radius: Style.trayWindowRadius
+        color: palette.window
+    }
+
     Button {
         id: sendReplyMessageButton
 

src/gui/tray/TrayFolderListItem.qml

@@ -37,6 +37,7 @@ MenuItem {
             anchors.fill: parent
             anchors.margins: Style.normalBorderWidth
             color: parent.parent.hovered || parent.parent.visualFocus ? palette.highlight : palette.window
+            radius: Style.halfTrayWindowRadius
         }
     }
 

src/gui/tray/TrayFoldersMenuButton.qml

@@ -114,7 +114,7 @@ HeaderButton {
 
                 cache: true
 
-                source: "image://svgimage-custom-color/folder.svg/"
+                source: "image://svgimage-custom-color/folder.svg/" + palette.windowText
                 sourceSize {
                     width: imageWidth
                     height: imageHeight
@@ -144,7 +144,7 @@ HeaderButton {
 
                     cache: true
 
-                    source: "image://svgimage-custom-color/caret-down.svg/"
+                    source: "image://svgimage-custom-color/caret-down.svg/" + palette.windowText
                     sourceSize {
                         width: openLocalFolderButtonCaretIconLoader.imageWidth
                         height: openLocalFolderButtonCaretIconLoader.imageHeight
@@ -178,6 +178,12 @@ HeaderButton {
             height: implicitHeight + y > Style.trayWindowHeight ? Style.trayWindowHeight - y : implicitHeight
             closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape
 
+            background: Rectangle {
+                border.color: palette.dark
+                color: palette.window
+                radius: Style.trayWindowRadius
+            }
+
             contentItem: ScrollView {
                 id: foldersMenuScrollView
 
@@ -208,9 +214,9 @@ HeaderButton {
                         subline: model.modelData.parentPath
                         width: foldersMenuListView.width
                         height: Style.standardPrimaryButtonHeight
-                        backgroundIconSource: "image://svgimage-custom-color/folder.svg/"
+                        backgroundIconSource: "image://svgimage-custom-color/folder.svg/" + palette.windowText
                         iconSource: isGroupFolder
-                                    ? "image://svgimage-custom-color/account-group.svg/"
+                                    ? "image://svgimage-custom-color/account-group.svg/" + palette.windowText
                                     : ""
 
                         onTriggered: {

src/gui/tray/UnifiedSearchInputContainer.qml

@@ -41,9 +41,16 @@ TextField {
     rightPadding: trayWindowUnifiedSearchTextFieldClearTextButton.width + trayWindowUnifiedSearchTextFieldClearTextButton.anchors.rightMargin + textFieldHorizontalPaddingOffset
 
     placeholderText: qsTr("Search files, messages, events …")
+    verticalAlignment: Qt.AlignVCenter
 
     selectByMouse: true
 
+    background: Rectangle {
+        border.color: palette.dark
+        radius: Style.trayWindowRadius
+        color: palette.window
+    }
+
     Image {
         id: trayWindowUnifiedSearchTextFieldSearchIcon
         width: Style.trayListItemIconSize - anchors.leftMargin

src/gui/tray/UserLine.qml

@@ -40,6 +40,7 @@ AbstractButton {
         color: (userLine.hovered || userLine.visualFocus) &&
                !(userMoreButton.hovered || userMoreButton.visualFocus) ?
                    palette.highlight : palette.window
+        radius: Style.halfTrayWindowRadius
     }
 
     contentItem: RowLayout {
@@ -48,7 +49,7 @@ AbstractButton {
 
         Image {
             id: accountAvatar
-            Layout.leftMargin: 7
+            Layout.leftMargin: Style.accountIconsMenuMargin
             verticalAlignment: Qt.AlignCenter
             cache: false
             source: model.avatar !== "" ? model.avatar : Theme.darkMode ? "image://avatars/fallbackWhite" : "image://avatars/fallbackBlack"
@@ -62,7 +63,7 @@ AbstractButton {
                 height: width
                 anchors.bottom: accountAvatar.bottom
                 anchors.right: accountAvatar.right
-                radius: width*0.5
+                radius:  width * Style.trayFolderStatusIndicatorRadiusFactor
             }
 
             Image {
@@ -148,14 +149,21 @@ AbstractButton {
 
             Image {
                 anchors.fill: parent
-                source: "image://svgimage-custom-color/more.svg/"
+                source: "image://svgimage-custom-color/more.svg/" + palette.windowText
                 fillMode: Image.PreserveAspectFit
+                anchors.rightMargin: Style.accountLabelsAnchorsMargin
             }
 
             AutoSizingMenu {
                 id: userMoreButtonMenu
                 closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape
 
+                background: Rectangle {
+                    border.color: palette.dark
+                    radius: Style.halfTrayWindowRadius
+                    color: palette.window
+                }
+
                 MenuItem {
                     visible: model.isConnected && model.serverHasUserStatus
                     height: visible ? implicitHeight : 0
@@ -163,6 +171,11 @@ AbstractButton {
                     font.pixelSize: Style.topLinePixelSize
                     hoverEnabled: true
                     onClicked: showUserStatusSelector(index)
+
+                    background: Rectangle {
+                        radius: Style.halfTrayWindowRadius
+                        color: parent.hovered ? palette.highlight : palette.window
+                    }
                 }
 
                 MenuItem {
@@ -185,6 +198,11 @@ AbstractButton {
                         }
                         accountMenu.close()
                     }
+
+                    background: Rectangle {
+                        radius: Style.halfTrayWindowRadius
+                        color: parent.hovered ? palette.highlight : palette.window
+                    }
                 }
 
                 MenuItem {
@@ -200,6 +218,11 @@ AbstractButton {
                     Accessible.role: Accessible.Button
                     Accessible.name: text
                     Accessible.onPressAction: removeAccountButton.clicked()
+
+                    background: Rectangle {
+                        radius: Style.halfTrayWindowRadius
+                        color: parent.hovered ? palette.highlight : palette.window
+                    }
                 }
             }
         }

src/gui/tray/Window.qml

@@ -243,7 +243,7 @@ ApplicationWindow {
             anchors.right:  trayWindowMainItem.right
             anchors.top:    trayWindowMainItem.top
             height:         Style.trayWindowHeaderHeight
-            color:          Style.currentUserHeaderColor
+            color:          palette.window
 
             RowLayout {
                 id: trayWindowHeaderLayout
@@ -289,7 +289,7 @@ ApplicationWindow {
                         background: Rectangle {
                             border.color: palette.dark
                             color: palette.window
-                            radius: Style.currentAccountButtonRadius
+                            radius: Style.halfTrayWindowRadius
                         }
 
                         onClosed: {
@@ -324,11 +324,12 @@ ApplicationWindow {
                                 spacing: 0
 
                                 Image {
-                                    Layout.leftMargin: 12
-                                    verticalAlignment: Qt.AlignCenter
-                                    source: "image://svgimage-custom-color/add.svg"
-                                    sourceSize.width: Style.headerButtonIconSize
-                                    sourceSize.height: Style.headerButtonIconSize
+                                    Layout.leftMargin: Style.accountIconsMenuMargin
+                                    verticalAlignment: Qt.AlignVCenter
+                                    horizontalAlignment: Qt.AlignCenter
+                                    source: "image://svgimage-custom-color/add.svg/" + palette.windowText
+                                    sourceSize.width: Style.addButtonIconSize
+                                    sourceSize.height: Style.addButtonIconSize
                                 }
                                 EnforcedPlainTextLabel {
                                     Layout.leftMargin: 14
@@ -346,6 +347,12 @@ ApplicationWindow {
                             Accessible.role: Accessible.MenuItem
                             Accessible.name: qsTr("Add new account")
                             Accessible.onPressAction: addAccountButton.clicked()
+
+                            background: Rectangle {
+                                radius: Style.halfTrayWindowRadius
+                                color: palette.highlight
+                                visible: addAccountButton.hovered
+                            }
                         }
 
                         Rectangle {
@@ -363,6 +370,12 @@ ApplicationWindow {
                             Accessible.role: Accessible.MenuItem
                             Accessible.name: Systray.syncIsPaused ? qsTr("Resume sync for all") : qsTr("Pause sync for all")
                             Accessible.onPressAction: syncPauseButton.clicked()
+
+                            background: Rectangle {
+                                radius: Style.halfTrayWindowRadius
+                                color: palette.highlight
+                                visible: syncPauseButton.hovered
+                            }
                         }
 
                         MenuItem {
@@ -374,6 +387,12 @@ ApplicationWindow {
                             Accessible.role: Accessible.MenuItem
                             Accessible.name: text
                             Accessible.onPressAction: settingsButton.clicked()
+
+                            background: Rectangle {
+                                radius: Style.halfTrayWindowRadius
+                                color: palette.highlight
+                                visible: settingsButton.hovered
+                            }
                         }
 
                         MenuItem {
@@ -385,6 +404,12 @@ ApplicationWindow {
                             Accessible.role: Accessible.MenuItem
                             Accessible.name: text
                             Accessible.onPressAction: exitButton.clicked()
+
+                            background: Rectangle {
+                                radius: Style.halfTrayWindowRadius
+                                color: palette.highlight
+                                visible: exitButton.hovered
+                            }
                         }
                     }
 
@@ -416,22 +441,22 @@ ApplicationWindow {
                                 height: width
                                 anchors.bottom: currentAccountAvatar.bottom
                                 anchors.right: currentAccountAvatar.right
-                                color: Style.currentUserHeaderColor
                                 radius: width * Style.trayFolderStatusIndicatorRadiusFactor
                             }
 
-                            Rectangle {
-                                id: currentAccountStatusIndicatorMouseHover
-                                visible: UserModel.currentUser && UserModel.currentUser.isConnected
-                                         && UserModel.currentUser.serverHasUserStatus
-                                width: Style.accountAvatarStateIndicatorSize +  + Style.trayFolderStatusIndicatorSizeOffset
-                                height: width
-                                anchors.bottom: currentAccountAvatar.bottom
-                                anchors.right: currentAccountAvatar.right
-                                color: currentAccountButton.hovered ? Style.currentUserHeaderTextColor : palette.window
-                                opacity: Style.trayFolderStatusIndicatorMouseHoverOpacityFactor
-                                radius: width * Style.trayFolderStatusIndicatorRadiusFactor
-                            }
+                            // TODO: check if we want add any hover effect
+                            // Rectangle {
+                            //     id: currentAccountStatusIndicatorMouseHover
+                            //     visible: UserModel.currentUser && UserModel.currentUser.isConnected
+                            //              && UserModel.currentUser.serverHasUserStatus
+                            //     width: Style.accountAvatarStateIndicatorSize +  + Style.trayFolderStatusIndicatorSizeOffset
+                            //     height: width
+                            //     anchors.bottom: currentAccountAvatar.bottom
+                            //     anchors.right: currentAccountAvatar.right
+                            //     color: currentAccountButton.hovered ? palette.highlight : palette.window
+                            //     opacity: Style.trayFolderStatusIndicatorMouseHoverOpacityFactor
+                            //     radius: width * Style.trayFolderStatusIndicatorRadiusFactor
+                            // }
 
                             Image {
                                 id: currentAccountStatusIndicator
@@ -505,15 +530,12 @@ ApplicationWindow {
                             }
                         }
 
-                        ColorOverlay {
-                            cached: true
-                            width: source.width
-                            height: source.height
-                            source: Image {
+                        Image {
                             Layout.alignment: Qt.AlignRight
                             verticalAlignment: Qt.AlignCenter
-                                Layout.margins: Style.accountDropDownCaretMargin
-                                source:  "image://svgimage-custom-color/caret-down.svg/"
+                            horizontalAlignment: Qt.AlignRight
+                            Layout.leftMargin: Style.accountDropDownCaretMargin
+                            source:  "image://svgimage-custom-color/caret-down.svg/" + palette.windowText
                             sourceSize.width: Style.accountDropDownCaretSize
                             sourceSize.height: Style.accountDropDownCaretSize
                             Accessible.role: Accessible.PopupMenu
@@ -521,7 +543,6 @@ ApplicationWindow {
                         }
                     }
                 }
-                }
 
                 // Add space between items
                 Item {
@@ -564,7 +585,7 @@ ApplicationWindow {
 
                 HeaderButton {
                     id: trayWindowAppsButton
-                    icon.source: "image://svgimage-custom-color/more-apps.svg/"
+                    icon.source: "image://svgimage-custom-color/more-apps.svg/" + palette.windowText
 
                     onClicked: {
                         if(appsMenuListView.count <= 0) {
@@ -590,8 +611,8 @@ ApplicationWindow {
 
                         background: Rectangle {
                             border.color: palette.dark
+                            radius: Style.halfTrayWindowRadius
                             color: palette.window
-                            radius: 2
                         }
 
                         contentItem: ScrollView {
@@ -615,11 +636,19 @@ ApplicationWindow {
                                     text: model.appName
                                     font.pixelSize: Style.topLinePixelSize
                                     icon.source: model.appIconUrl
+                                    icon.color: palette.windowText
                                     onTriggered: UserAppsModel.openAppUrl(appUrl)
                                     hoverEnabled: true
                                     Accessible.role: Accessible.MenuItem
                                     Accessible.name: qsTr("Open %1 in browser").arg(model.appName)
                                     Accessible.onPressAction: appEntry.triggered()
+
+                                    background: Rectangle {
+                                        anchors.fill: parent
+                                        anchors.margins: 1
+                                        color: appEntry.hovered ? palette.highlight : palette.window
+                                        radius: Style.halfTrayWindowRadius
+                                    }
                                 }
                             }
                         }
@@ -630,7 +659,7 @@ ApplicationWindow {
 
         UnifiedSearchInputContainer {
             id: trayWindowUnifiedSearchInputContainer
-            height: Style.trayWindowHeaderHeight * 0.65
+            height: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight)
 
             anchors {
                 top: trayWindowHeaderBackground.bottom
@@ -648,17 +677,18 @@ ApplicationWindow {
             onTextEdited: { UserModel.currentUser.unifiedSearchResultsListModel.searchTerm = trayWindowUnifiedSearchInputContainer.text }
             onClearText: { UserModel.currentUser.unifiedSearchResultsListModel.searchTerm = "" }
 
-            Rectangle {
-                id: bottomUnifiedSearchInputSeparator
+            // TODO: consult designers, this line looks weird atm
+            // Rectangle {
+            //     id: bottomUnifiedSearchInputSeparator
 
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.bottom: parent.bottom
+            //     anchors.left: parent.left
+            //     anchors.right: parent.right
+            //     anchors.bottom: parent.bottom
 
-                height: 1
-                color: Style.menuBorder
-                visible: trayWindowMainItem.isUnifiedSearchActive
-            }
+            //     height: 1
+            //     color: Style.menuBorder
+            //     visible: trayWindowMainItem.isUnifiedSearchActive
+            // }
         }
 
         ErrorBox {

src/gui/tray/activitylistmodel.cpp

@@ -226,19 +226,17 @@ QVariant ActivityListModel::data(const QModelIndex &index, int role) const
     };
 
     const auto generateIconPath = [&]() {
-        auto colorIconPath = QStringLiteral("image://svgimage-custom-color/");//role == DarkIconRole ? QStringLiteral("qrc:///client/theme/white/") : QStringLiteral("qrc:///client/theme/black/");
+        auto colorIconPath = role == DarkIconRole ? QStringLiteral("image://svgimage-custom-color/%1/white") : QStringLiteral("image://svgimage-custom-color/%1/black");
         if (a._type == Activity::NotificationType && !a._talkNotificationData.userAvatar.isEmpty()) {
-            return QStringLiteral("image://svgimage-custom-color/talk-app.svg");
+            return QStringLiteral("image://svgimage-custom-color/talk-bordered.svg");
         } else if (a._type == Activity::SyncResultType) {
-            colorIconPath.append("state-error.svg");
-            return colorIconPath;
+            return colorIconPath.arg("state-error.svg");
         } else if (a._type == Activity::SyncFileItemType) {
             if (a._syncFileItemStatus == SyncFileItem::NormalError
                 || a._syncFileItemStatus == SyncFileItem::FatalError
                 || a._syncFileItemStatus == SyncFileItem::DetailError
                 || a._syncFileItemStatus == SyncFileItem::BlacklistedError) {
-                colorIconPath.append("state-error.svg");
-                return colorIconPath;
+                return colorIconPath.arg("state-error.svg");
             } else if (a._syncFileItemStatus == SyncFileItem::SoftError
                 || a._syncFileItemStatus == SyncFileItem::Conflict
                 || a._syncFileItemStatus == SyncFileItem::Restoration
@@ -246,29 +244,26 @@ QVariant ActivityListModel::data(const QModelIndex &index, int role) const
                 || a._syncFileItemStatus == SyncFileItem::FileNameInvalid
                 || a._syncFileItemStatus == SyncFileItem::FileNameInvalidOnServer
                 || a._syncFileItemStatus == SyncFileItem::FileNameClash) {
-                colorIconPath.append("state-warning.svg");
-                return colorIconPath;
+                return colorIconPath.arg("state-warning.svg");
             } else if (a._syncFileItemStatus == SyncFileItem::FileIgnored) {
-                colorIconPath.append("state-info.svg");
-                return colorIconPath;
+                return colorIconPath.arg("state-info.svg");
             } else {
                 // File sync successful
                 if (a._fileAction == "file_created") {
-                    return a._previews.empty() ? QStringLiteral("image://svgimage-custom-color/add.svg")
-                                               : QStringLiteral("image://svgimage-custom-color/add-bordered.svg");
+                    return a._previews.empty() ? QStringLiteral("image://svgimage-custom-color/add.svg/")
+                                               : QStringLiteral("image://svgimage-custom-color/add-bordered.svg/");
                 } else if (a._fileAction == "file_deleted") {
-                    return a._previews.empty() ? QStringLiteral("image://svgimage-custom-color/delete.svg")
-                                               : QStringLiteral("image://svgimage-custom-color/delete-bordered.svg");
+                    return a._previews.empty() ? QStringLiteral("image://svgimage-custom-color/delete.svg/")
+                                               : QStringLiteral("image://svgimage-custom-color/delete-bordered.svg/");
                 } else {
-                    return a._previews.empty() ? colorIconPath % QStringLiteral("change.svg")
-                                               : QStringLiteral("image://svgimage-custom-color/change-bordered.svg");
+                    return a._previews.empty() ? colorIconPath.arg(QStringLiteral("change.svg"))
+                                               : QStringLiteral("image://svgimage-custom-color/change-bordered.svg/");
                 }
             }
         } else {
             // We have an activity
             if (a._icon.isEmpty()) {
-                colorIconPath.append("activity.svg");
-                return colorIconPath;
+                return colorIconPath.arg("activity.svg");
             }
 
             const QString basePath = QStringLiteral("image://tray-image-provider/") % a._icon % QStringLiteral("/");
@@ -302,8 +297,9 @@ QVariant ActivityListModel::data(const QModelIndex &index, int role) const
     }
 
     case DarkIconRole:
-    case LightIconRole:
+    case LightIconRole: {
         return generateIconPath();
+    }
     case ObjectTypeRole:
         return a._objectType;
     case ObjectIdRole:
@@ -511,7 +507,7 @@ void ActivityListModel::insertOrRemoveDummyFetchingActivity()
         _dummyFetchingActivities._objectType = dummyFetchingActivityObjectType;
         _dummyFetchingActivities._subject = tr("Fetching activities …");
         _dummyFetchingActivities._dateTime = QDateTime::currentDateTime();
-        _dummyFetchingActivities._icon = QLatin1String("image://svgimage-custom-color/change-bordered.svg");
+        _dummyFetchingActivities._icon = QLatin1String("image://svgimage-custom-color/change-bordered.svg/");
 
         addEntriesToActivityList({_dummyFetchingActivities});
     } else if (!_finalList.isEmpty() && _finalList.first()._objectType == dummyFetchingActivityObjectType) {

theme.qrc.in

@@ -236,10 +236,10 @@
         <file>theme/colored/user-status-dnd.svg</file>
         <file>theme/black/email.svg</file>
         <file>theme/black/edit.svg</file>
+        <file>theme/black/more-apps.svg</file>
         <file>theme/delete.svg</file>
         <file>theme/send.svg</file>
         <file>theme/call-notification.wav</file>
-        <file>theme/more-apps.svg</file>
         <file>theme/talk-app.svg</file>
     </qresource>
 </RCC>

theme/Style/Style.qml

@@ -50,7 +50,10 @@ QtObject {
     // Dimensions and sizes
     property int trayWindowWidth: variableSize(400)
     property int trayWindowHeight: variableSize(510)
+    // text input and main windows radius
     property int trayWindowRadius: 10
+    // dropdown menus radius
+    property int halfTrayWindowRadius: 5
     property int trayWindowBorderWidth: variableSize(1)
     property int trayWindowHeaderHeight: variableSize(60)
     property int trayHorizontalMargin: 10
@@ -93,7 +96,7 @@ QtObject {
     property int folderStateIndicatorSize: 16
     property int accountLabelWidth: 128
 
-    property int accountDropDownCaretSize: 20
+    property int accountDropDownCaretSize: 10
     property int accountDropDownCaretMargin: 8
 
     property int trayFoldersMenuButtonStateIndicatorBottomOffset: 5
@@ -103,9 +106,12 @@ QtObject {
     property int addAccountButtonHeight: 50
 
     property int headerButtonIconSize: 32
+    property int addButtonIconSize: 26
     property int dismissButtonSize: 26
     property int minimumActivityItemHeight: 24
 
+    property int accountIconsMenuMargin: 7
+
     property int activityLabelBaseWidth: 240
 
     property int talkReplyTextFieldPreferredHeight: 34

theme/black/more-apps.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#000"><path d="M230.67-160q-29.67 0-50.17-20.5T160-230.67q0-29.66 20.5-50.16 20.5-20.5 50.17-20.5 29.66 0 50.16 20.5 20.5 20.5 20.5 50.16 0 29.67-20.5 50.17T230.67-160ZM480-160q-29.67 0-50.17-20.5t-20.5-50.17q0-29.66 20.5-50.16 20.5-20.5 50.17-20.5t50.17 20.5q20.5 20.5 20.5 50.16 0 29.67-20.5 50.17T480-160Zm249.33 0q-29.66 0-50.16-20.5-20.5-20.5-20.5-50.17 0-29.66 20.5-50.16 20.5-20.5 50.16-20.5 29.67 0 50.17 20.5t20.5 50.16q0 29.67-20.5 50.17T729.33-160ZM230.67-409.33q-29.67 0-50.17-20.5T160-480q0-29.67 20.5-50.17t50.17-20.5q29.66 0 50.16 20.5 20.5 20.5 20.5 50.17t-20.5 50.17q-20.5 20.5-50.16 20.5Zm249.33 0q-29.67 0-50.17-20.5T409.33-480q0-29.67 20.5-50.17t50.17-20.5q29.67 0 50.17 20.5t20.5 50.17q0 29.67-20.5 50.17T480-409.33Zm249.33 0q-29.66 0-50.16-20.5-20.5-20.5-20.5-50.17t20.5-50.17q20.5-20.5 50.16-20.5 29.67 0 50.17 20.5T800-480q0 29.67-20.5 50.17t-50.17 20.5ZM230.67-658.67q-29.67 0-50.17-20.5T160-729.33q0-29.67 20.5-50.17t50.17-20.5q29.66 0 50.16 20.5 20.5 20.5 20.5 50.17 0 29.66-20.5 50.16-20.5 20.5-50.16 20.5Zm249.33 0q-29.67 0-50.17-20.5t-20.5-50.16q0-29.67 20.5-50.17T480-800q29.67 0 50.17 20.5t20.5 50.17q0 29.66-20.5 50.16-20.5 20.5-50.17 20.5Zm249.33 0q-29.66 0-50.16-20.5-20.5-20.5-20.5-50.16 0-29.67 20.5-50.17t50.16-20.5q29.67 0 50.17 20.5t20.5 50.17q0 29.66-20.5 50.16-20.5 20.5-50.17 20.5Z"/></svg>

theme/more-apps.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 32 32" height="32" width="32" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M13.333 2.667H2.667c-.734 0-1.327.6-1.327 1.333l-.007 8c0 .733.6 1.333 1.334 1.333h10.666c.734 0 1.334-.6 1.334-1.333V4c0-.733-.6-1.333-1.334-1.333Zm0 2.666L8 8.667 2.667 5.333V4L8 7.333 13.333 4v1.333Z" style="fill-rule:nonzero" transform="translate(0 16)"/><path d="M6 14c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 4 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 6 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587Zm6 0c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 10 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 12 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587Zm6 0c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 16 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 18 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587Z" style="fill-rule:nonzero" transform="matrix(.875 0 0 .875 13.5 13.558)"/><path d="M5 22c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 3 20V6c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 5 4h1V2h2v2h8V2h2v2h1c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413v14a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587H5Zm0-2h14V10H5v10Z" style="fill-rule:nonzero" transform="matrix(.73887 0 0 .73887 -.924 -.495)"/><path d="M1 20v-2.8c0-.567.146-1.087.438-1.563A2.916 2.916 0 0 1 2.6 14.55a14.859 14.859 0 0 1 3.15-1.163A13.738 13.738 0 0 1 9 13c1.1 0 2.183.129 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.871.613 1.163 1.087.291.476.437.996.437 1.563V20H1Zm18 0v-3c0-.733-.204-1.437-.612-2.113-.409-.675-.988-1.254-1.738-1.737 1.575.179 3.102.654 4.5 1.4.6.333 1.058.704 1.375 1.113.317.408.475.854.475 1.337v3h-4ZM9 12c-1.1 0-2.042-.392-2.825-1.175C5.392 10.042 5 9.1 5 8s.392-2.042 1.175-2.825C6.958 4.392 7.9 4 9 4s2.042.392 2.825 1.175C12.608 5.958 13 6.9 13 8s-.392 2.042-1.175 2.825C11.042 11.608 10.1 12 9 12Zm10-4c0 1.1-.392 2.042-1.175 2.825C17.042 11.608 16.1 12 15 12c-.183 0-.417-.021-.7-.062a6.142 6.142 0 0 1-.7-.138 5.956 5.956 0 0 0 1.038-1.775A5.785 5.785 0 0 0 15 8c0-.7-.121-1.375-.362-2.025A5.956 5.956 0 0 0 13.6 4.2c.233-.083.467-.137.7-.163.233-.025.467-.037.7-.037 1.1 0 2.042.392 2.825 1.175C18.608 5.958 19 6.9 19 8Z" style="fill-rule:nonzero" transform="matrix(.62273 0 0 .62273 16.416 1.062)"/></svg>

theme/white/more-apps.svg

@@ -1 +1 @@
-<svg viewBox="0 0 32 32" height="32" width="32" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M13.333 2.667H2.667c-.734 0-1.327.6-1.327 1.333l-.007 8c0 .733.6 1.333 1.334 1.333h10.666c.734 0 1.334-.6 1.334-1.333V4c0-.733-.6-1.333-1.334-1.333Zm0 2.666L8 8.667 2.667 5.333V4L8 7.333 13.333 4v1.333Z" style="fill:#fff;fill-rule:nonzero" transform="translate(0 16)"/><path d="M6 14c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 4 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 6 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587Zm6 0c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 10 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 12 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587Zm6 0c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 16 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 18 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587Z" style="fill:#fff;fill-rule:nonzero" transform="matrix(.875 0 0 .875 13.5 13.558)"/><path d="M5 22c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 3 20V6c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 5 4h1V2h2v2h8V2h2v2h1c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413v14a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587H5Zm0-2h14V10H5v10Z" style="fill:#fff;fill-rule:nonzero" transform="matrix(.73887 0 0 .73887 -.924 -.495)"/><path d="M1 20v-2.8c0-.567.146-1.087.438-1.563A2.916 2.916 0 0 1 2.6 14.55a14.859 14.859 0 0 1 3.15-1.163A13.738 13.738 0 0 1 9 13c1.1 0 2.183.129 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.871.613 1.163 1.087.291.476.437.996.437 1.563V20H1Zm18 0v-3c0-.733-.204-1.437-.612-2.113-.409-.675-.988-1.254-1.738-1.737 1.575.179 3.102.654 4.5 1.4.6.333 1.058.704 1.375 1.113.317.408.475.854.475 1.337v3h-4ZM9 12c-1.1 0-2.042-.392-2.825-1.175C5.392 10.042 5 9.1 5 8s.392-2.042 1.175-2.825C6.958 4.392 7.9 4 9 4s2.042.392 2.825 1.175C12.608 5.958 13 6.9 13 8s-.392 2.042-1.175 2.825C11.042 11.608 10.1 12 9 12Zm10-4c0 1.1-.392 2.042-1.175 2.825C17.042 11.608 16.1 12 15 12c-.183 0-.417-.021-.7-.062a6.142 6.142 0 0 1-.7-.138 5.956 5.956 0 0 0 1.038-1.775A5.785 5.785 0 0 0 15 8c0-.7-.121-1.375-.362-2.025A5.956 5.956 0 0 0 13.6 4.2c.233-.083.467-.137.7-.163.233-.025.467-.037.7-.037 1.1 0 2.042.392 2.825 1.175C18.608 5.958 19 6.9 19 8Z" style="fill:#fff;fill-rule:nonzero" transform="matrix(.62273 0 0 .62273 16.416 1.062)"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#fff"><path d="M230.67-160q-29.67 0-50.17-20.5T160-230.67q0-29.66 20.5-50.16 20.5-20.5 50.17-20.5 29.66 0 50.16 20.5 20.5 20.5 20.5 50.16 0 29.67-20.5 50.17T230.67-160ZM480-160q-29.67 0-50.17-20.5t-20.5-50.17q0-29.66 20.5-50.16 20.5-20.5 50.17-20.5t50.17 20.5q20.5 20.5 20.5 50.16 0 29.67-20.5 50.17T480-160Zm249.33 0q-29.66 0-50.16-20.5-20.5-20.5-20.5-50.17 0-29.66 20.5-50.16 20.5-20.5 50.16-20.5 29.67 0 50.17 20.5t20.5 50.16q0 29.67-20.5 50.17T729.33-160ZM230.67-409.33q-29.67 0-50.17-20.5T160-480q0-29.67 20.5-50.17t50.17-20.5q29.66 0 50.16 20.5 20.5 20.5 20.5 50.17t-20.5 50.17q-20.5 20.5-50.16 20.5Zm249.33 0q-29.67 0-50.17-20.5T409.33-480q0-29.67 20.5-50.17t50.17-20.5q29.67 0 50.17 20.5t20.5 50.17q0 29.67-20.5 50.17T480-409.33Zm249.33 0q-29.66 0-50.16-20.5-20.5-20.5-20.5-50.17t20.5-50.17q20.5-20.5 50.16-20.5 29.67 0 50.17 20.5T800-480q0 29.67-20.5 50.17t-50.17 20.5ZM230.67-658.67q-29.67 0-50.17-20.5T160-729.33q0-29.67 20.5-50.17t50.17-20.5q29.66 0 50.16 20.5 20.5 20.5 20.5 50.17 0 29.66-20.5 50.16-20.5 20.5-50.16 20.5Zm249.33 0q-29.67 0-50.17-20.5t-20.5-50.16q0-29.67 20.5-50.17T480-800q29.67 0 50.17 20.5t20.5 50.17q0 29.66-20.5 50.16-20.5 20.5-50.17 20.5Zm249.33 0q-29.66 0-50.16-20.5-20.5-20.5-20.5-50.16 0-29.67 20.5-50.17t50.16-20.5q29.67 0 50.17 20.5t20.5 50.17q0 29.66-20.5 50.16-20.5 20.5-50.17 20.5Z"/></svg>