smartlist: update design for swarm

+ Clear search bar on highlighted
+ Add title in the smartlist on creation
+ Remove last interaction on swarm creation
+ RecordBox update design and avoid white buttons on white videos
+ Ellipsize title in Middle to keep +X

Change-Id: Ib19831e2291e3fc94eacd6cd65012eebcb310faa

resources/icons/re_record_24dp.svg

@@ -1 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" fill="white"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<path d="M20.2,6.5c-1.4-2.2-3.6-3.7-6-4.2C9,1.1,3.9,4.2,2.7,9.3c0,0,0,0,0,0l0,0.1c-0.6,2.4-0.1,4.9,1.2,6.9c1.2,1.9,3,3.3,5.1,4
+	l-0.4,0.3c-0.1,0-0.1,0.1-0.2,0.1C8,20.9,8,21.4,8.2,21.7C8.3,21.9,8.5,22,8.7,22c0,0,0.1,0,0.1,0c0.2,0,0.3-0.1,0.4-0.1l2-1.2
+	c0.2-0.1,0.3-0.3,0.3-0.5s0-0.4-0.1-0.6l-1.3-2c-0.2-0.3-0.6-0.4-1-0.2c-0.4,0.2-0.5,0.7-0.3,1l0.2,0.4c-1.7-0.6-3.1-1.7-4.1-3.3
+	c-1.1-1.7-1.4-3.8-1-5.9c0,0,0,0,0,0l0-0.1c1-4.2,5.3-6.8,9.7-5.9c2.1,0.5,3.9,1.8,5.1,3.6c1.1,1.7,1.4,3.8,1,5.9
+	c-0.6,2.7-2.8,4.9-5.6,5.8c-0.4,0.1-0.6,0.5-0.5,0.9c0.1,0.4,0.5,0.6,0.9,0.5c3.3-1,5.9-3.7,6.7-6.9l0-0.1
+	C21.9,11,21.5,8.5,20.2,6.5z"/>
+</svg>

src/commoncomponents/EditableLineEdit.qml

@@ -23,6 +23,7 @@ import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
 import net.jami.Constants 1.1
+import net.jami.Adapters 1.1
 
 Item {
     id: root
@@ -37,6 +38,8 @@ Item {
     property alias placeholderText: lineEdit.placeholderText
     property alias placeholderTextColor: lineEdit.placeholderTextColor
     property alias backgroundColor: lineEdit.backgroundColor
+    property var editIconColor:  UtilsAdapter.luma(root.color) ? JamiTheme.editLineColor : "white"
+    property var cancelIconColor: UtilsAdapter.luma(root.color) ? JamiTheme.buttonTintedBlue : "white"
 
     property bool editable: false
     property bool hovered: false
@@ -75,7 +78,7 @@ Item {
             layer {
                 enabled: true
                 effect: ColorOverlay {
-                    color: root.color
+                    color: root.editIconColor
                 }
             }
 
@@ -95,10 +98,11 @@ Item {
             readOnly: !editable
             underlined: true
 
-            borderColor: root.color
+            borderColor: root.editIconColor
+            fieldLayoutHeight: 24
 
             Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: root.preferredFieldWidth - btnEdit.width - editImg.width - btnEdit.width
+            Layout.preferredWidth: root.preferredFieldWidth - editImg.width - btnCancel.width
             Layout.fillHeight: true
 
             wrapMode: Text.NoWrap
@@ -119,13 +123,14 @@ Item {
         }
 
         PushButton {
-            id: btnEdit
+            id: btnCancel
 
             Layout.alignment: Qt.AlignVCenter
 
             enabled: editable
+            preferredSize: lineEdit.height * 2 / 3
             opacity: editable ? 0.8 : 0
-            imageColor: root.color
+            imageColor: root.cancelIconColor
             normalColor: "transparent"
             hoveredColor: JamiTheme.hoveredButtonColor
 
@@ -151,7 +156,7 @@ Item {
         radius: JamiTheme.primaryRadius
 
         visible: root.editable || root.hovered
-        color: root.color
+        color: root.editIconColor
 
         Rectangle {
             visible: parent.visible
@@ -159,7 +164,7 @@ Item {
                 fill: parent
                 topMargin: 0
                 rightMargin: 0
-                bottomMargin: 3
+                bottomMargin: 1
                 leftMargin: 0
             }
             color: root.backgroundColor

src/commoncomponents/MaterialButton.qml

@@ -200,4 +200,13 @@ AbstractButton {
             keyEvent.accepted = true
         }
     }
+
+    MouseArea {
+        anchors.fill: parent
+
+        // We don't want to eat clicks on the Text.
+        acceptedButtons: Qt.NoButton
+        cursorShape: root.hovered ? Qt.PointingHandCursor : Qt.ArrowCursor
+    }
+
 }

src/commoncomponents/MaterialLineEdit.qml

@@ -76,7 +76,7 @@ TextField {
                 fill: parent
                 topMargin: 0
                 rightMargin: 0
-                bottomMargin: 3
+                bottomMargin: 1
                 leftMargin: 0
             }
             color: backgroundColor

src/commoncomponents/PhotoboothView.qml

@@ -34,7 +34,7 @@ Item {
     property bool newConversation: false
     property real avatarSize
     property real buttonSize: avatarSize
-    property bool inverted: false
+    property bool darkTheme: false
 
     signal focusOnPreviousItem
     signal focusOnNextItem
@@ -196,7 +196,7 @@ Item {
 
         anchors.centerIn: parent
         Layout.preferredHeight: childrenRect.height
-        spacing: 12
+        spacing: 10
 
         function backToAvatar() {
             imageLayer.visible = true
@@ -209,17 +209,18 @@ Item {
             objectName: "takePhotoButton"
 
             Layout.alignment: Qt.AlignHCenter
+            Layout.leftMargin: cancelButton.width
 
             height: buttonSize
             width: buttonSize
             radius: height / 2
             border.width: 2
-            border.color: JamiTheme.textColor
+            border.color: darkTheme ? "white" : JamiTheme.buttonTintedBlue
             normalColor: "transparent"
-            imageColor: JamiTheme.textColor
+            imageColor: darkTheme ? "white" : JamiTheme.buttonTintedBlue
             toolTipText: JamiStrings.takePhoto
             source: JamiResources.baseline_camera_alt_24dp_svg
-            hoveredColor: Qt.rgba(255, 255, 255, 0.2)
+            hoveredColor: darkTheme ? Qt.rgba(255, 255, 255, 0.2) : JamiTheme.buttonTintedBlueInternalHover
 
             Keys.onPressed: function (keyEvent) {
                 if (keyEvent.key === Qt.Key_Enter ||
@@ -240,15 +241,14 @@ Item {
             KeyNavigation.down: KeyNavigation.tab
 
             onClicked: {
-                recordBox.parent = takePhotoButton
+                recordBox.parent = buttonsRowLayout
 
                 recordBox.x = Qt.binding(function() {
-                    var buttonCenterX = takePhotoButton.x + takePhotoButton.width / 2
+                    var buttonCenterX = buttonsRowLayout.width / 2
                     return buttonCenterX - recordBox.width / 2
                 })
                 recordBox.y = Qt.binding(function() {
-                    var buttonY = takePhotoButton.y
+                    return - recordBox.height / 2
-                    return inverted? buttonY + takePhotoButton.height : buttonY - recordBox.height
                 })
                 startBooth()
             }
@@ -268,12 +268,12 @@ Item {
             width: buttonSize
             radius: height / 2
             border.width: 2
-            border.color: JamiTheme.textColor
+            border.color: darkTheme ? "white" : JamiTheme.buttonTintedBlue
             normalColor: "transparent"
             source: JamiResources.round_folder_24dp_svg
             toolTipText: JamiStrings.importFromFile
-            imageColor: JamiTheme.textColor
+            imageColor: darkTheme ? "white" : JamiTheme.buttonTintedBlue
-            hoveredColor: Qt.rgba(255, 255, 255, 0.2)
+            hoveredColor: darkTheme ? Qt.rgba(255, 255, 255, 0.2) : JamiTheme.buttonTintedBlueInternalHover
 
             Keys.onPressed: function (keyEvent) {
                 if (keyEvent.key === Qt.Key_Enter ||
@@ -309,12 +309,12 @@ Item {
             width: buttonSize
             radius: height / 2
             border.width: 2
-            border.color: JamiTheme.textColor
+            border.color: darkTheme ? "white" : JamiTheme.buttonTintedBlue
             normalColor: "transparent"
             source: JamiResources.ic_hangup_participant_24dp_svg
             toolTipText: JamiStrings.clearAvatar
-            imageColor: JamiTheme.textColor
+            imageColor: darkTheme ? "white" : JamiTheme.buttonTintedBlue
-            hoveredColor: Qt.rgba(255, 255, 255, 0.2)
+            hoveredColor: darkTheme ? Qt.rgba(255, 255, 255, 0.2) : JamiTheme.buttonTintedBlueInternalHover
 
             visible: {
                 if (!newConversation && LRCInstance.currentAccountAvatarSet)
@@ -353,13 +353,14 @@ Item {
             id: cancelButton
 
             preferredSize: 18
+            width: 18
+            height: 18
             radius: height / 2
             normalColor: "transparent"
             source: JamiResources.round_close_24dp_svg
             toolTipText: JamiStrings.cancel
-            imageColor: JamiTheme.textColor
+            imageColor: darkTheme ? "white" : JamiTheme.buttonTintedBlue
-            hoveredColor: Qt.rgba(255, 255, 255, 0.2)
+            hoveredColor: darkTheme ? Qt.rgba(255, 255, 255, 0.2) : JamiTheme.buttonTintedBlueInternalHover
-            Layout.leftMargin: -8
 
             Keys.onPressed: function (keyEvent) {
                 if (keyEvent.key === Qt.Key_Enter ||

src/constant/JamiStrings.qml

@@ -37,6 +37,7 @@ Item {
     property string incomingVideoCallFrom: qsTr("Incoming video call from {}")
     property string contactSearchConversation: qsTr("Find a user or search for a conversation")
     property string startASwarm: qsTr("Start a swarm")
+    property string createASwarm: qsTr("Create a swarm")
     property string contactSearchInvitations: qsTr("Search your invitations")
     property string invitations: qsTr("Invitations")
     property string description: qsTr("Jami is free software for universal communication which respects the freedoms and the privacy of its users.")
@@ -621,8 +622,8 @@ Item {
     property string members: qsTr("%1 Members")
     property string member: qsTr("Member")
     property string documents: qsTr("Documents")
-    property string editTitle: qsTr("Edit title")
+    property string groupName: qsTr("Group's name")
-    property string editDescription: qsTr("Edit description")
+    property string addADescription: qsTr("Add a description")
 
     property string ignoreTheSwarm: qsTr("Ignore the swarm")
     property string ignoreTheSwarmTooltip: qsTr("Ignore all notifications from this conversation")

src/constant/JamiTheme.qml

@@ -79,9 +79,11 @@ Item {
     property color invertedHoveredButtonColor: Qt.rgba(0, 0, 0, 0.6)
     property color invertedNormalButtonColor: Qt.rgba(0, 0, 0, 0.75)
 
-    property color buttonTintedBlue: "#00aaff"
+    property color editLineColor: "#03b9e9"
-    property color buttonTintedBlueHovered: "#0e81c5"
+    property color buttonTintedBlue: "#005699"
-    property color buttonTintedBluePressed: "#273261"
+    property color buttonTintedBlueHovered: "#0071c9"
+    property color buttonTintedBlueInternalHover: Qt.rgba(0, 86, 153, 0.2)
+    property color buttonTintedBluePressed: "#0071c9"
     property color buttonTintedGrey: darkTheme ? "#555" : "#999"
     property color buttonTintedGreyHovered: "#777"
     property color buttonTintedGreyPressed: "#777"
@@ -167,7 +169,7 @@ Item {
     property color fileInTimestampColor: darkTheme ? "#999" : "#555"
     property color chatviewBgColor: darkTheme ? bgDarkMode_ : whiteColor
     property color bgInvitationRectColor: darkTheme ? "#222222" : whiteColor
-    property color placeholderTextColor: darkTheme ? "#7a7a7a" : "#767676"
+    property color placeholderTextColor: darkTheme ? "#7a7a7a" : Qt.rgba(0, 0, 0, 0.2)
     property color placeholderTextColorWhite: "#cccccc"
     property color inviteHoverColor: darkTheme ? blackColor : whiteColor
     property color chatviewButtonColor: darkTheme ? whiteColor : blackColor
@@ -271,7 +273,7 @@ Item {
     property real preferredFieldHeight: 32
     property real preferredMarginSize: 16
     property real settingsMarginSize: 8
-    property real swarmDetailsPageTopMargin: 64
+    property real swarmDetailsPageTopMargin: 32
     property real preferredDialogWidth: 400
     property real preferredDialogHeight: 300
     property real minimumPreviewWidth: 120

src/mainview/components/NewSwarmPage.qml

@@ -67,22 +67,22 @@ Rectangle {
                 delegate: Rectangle {
                     id: delegate
                     radius: (delegate.height + 12) / 2
-                    width: childrenRect.width + 12
+                    width: label.width + 36
-                    height: childrenRect.height + 12
+                    height: label.height + 12
 
                     RowLayout {
                         anchors.centerIn: parent
 
                         Label {
+                            id: label
                             text: UtilsAdapter.getBestNameForUri(CurrentAccount.id, modelData.uri)
                             color: JamiTheme.textColor
+                            Layout.leftMargin: 8
                         }
 
                         PushButton {
                             id: removeUserBtn
 
-                            Layout.leftMargin: 8
-
                             preferredSize: 24
 
                             source: JamiResources.round_close_24dp_svg
@@ -110,6 +110,7 @@ Rectangle {
             id: currentAccountAvatar
 
             Layout.alignment: Qt.AlignCenter
+            darkTheme: UtilsAdapter.luma(root.color)
 
             newConversation: true
             imageId: root.visible ? "temp" : ""
@@ -127,10 +128,27 @@ Rectangle {
             horizontalAlignment: editable ? Text.AlignLeft : Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
 
-            placeholderText: JamiStrings.editTitle
+            placeholderText: JamiStrings.groupName
-            tooltipText: JamiStrings.editTitle
+            tooltipText: JamiStrings.groupName
             backgroundColor: root.color
-            color: "white"
+            color: UtilsAdapter.luma(backgroundColor) ?
+                    JamiTheme.chatviewTextColorLight :
+                    JamiTheme.chatviewTextColorDark
+            placeholderTextColor: {
+                if (editable) {
+                    if (UtilsAdapter.luma(root.color)) {
+                        return JamiTheme.placeholderTextColorWhite
+                    } else {
+                        return JamiTheme.placeholderTextColor
+                    }
+                } else {
+                    if (UtilsAdapter.luma(root.color)) {
+                        return JamiTheme.chatviewTextColorLight
+                    } else {
+                        return JamiTheme.chatviewTextColorDark
+                    }
+                }
+            }
         }
 
         EditableLineEdit {
@@ -138,15 +156,32 @@ Rectangle {
             Layout.alignment: Qt.AlignCenter
             Layout.topMargin: JamiTheme.preferredMarginSize
 
-            font.pointSize: JamiTheme.titleFontSize
+            font.pointSize: JamiTheme.menuFontSize
 
             horizontalAlignment: editable ? Text.AlignLeft : Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
 
-            placeholderText: JamiStrings.editDescription
+            placeholderText: JamiStrings.addADescription
-            tooltipText: JamiStrings.editDescription
+            tooltipText: JamiStrings.addADescription
             backgroundColor: root.color
-            color: "white"
+            color: UtilsAdapter.luma(backgroundColor) ?
+                    JamiTheme.chatviewTextColorLight :
+                    JamiTheme.chatviewTextColorDark
+            placeholderTextColor: {
+                if (editable) {
+                    if (UtilsAdapter.luma(root.color)) {
+                        return JamiTheme.placeholderTextColorWhite
+                    } else {
+                        return JamiTheme.placeholderTextColor
+                    }
+                } else {
+                    if (UtilsAdapter.luma(root.color)) {
+                        return JamiTheme.chatviewTextColorLight
+                    } else {
+                        return JamiTheme.chatviewTextColorDark
+                    }
+                }
+            }
         }
 
         MaterialButton {

src/mainview/components/RecordBox.qml

@@ -18,6 +18,7 @@
 
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
 import net.jami.Models 1.1
@@ -40,6 +41,7 @@ Popup {
     property int state: RecordBox.States.INIT
     property bool isVideo: false
     property bool isPhoto: false
+    property bool showVideo: (root.isVideo && VideoDevices.listSize !== 0)
     property int preferredWidth: 320
     property int preferredHeight: 240
     property int btnSize: 40
@@ -54,30 +56,14 @@ Popup {
 
     function openRecorder(vid) {
         isVideo = vid
-
-        scaleHeight()
         updateState(RecordBox.States.INIT)
 
         if (isVideo) {
-            previewWidget.startWithId(VideoDevices.getDefaultDevice())
+            localVideo.startWithId(VideoDevices.getDefaultDevice())
         }
         open()
     }
 
-    function scaleHeight() {
-        height = preferredHeight
-        if (isVideo) {
-            var resolution = VideoDevices.defaultRes
-            var resVec = resolution.split("x")
-            var aspectRatio = resVec[1] / resVec[0]
-            if (aspectRatio) {
-                height = preferredWidth * aspectRatio
-            } else {
-                console.error("Could not scale recording video preview")
-            }
-        }
-    }
-
     function closeRecorder() {
         if (isVideo) {
             VideoDevices.stopDevice(previewWidget.deviceId)
@@ -143,8 +129,6 @@ Popup {
         time.text = min + ":" + sec
     }
 
-    width: 320
-    height: 240
     modal: true
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
 
@@ -160,278 +144,31 @@ Popup {
         }
     }
 
-    background: Rectangle {
+    background: Item {} // Computed by id: box, to do the layer on LocalVideo
-        anchors.fill: parent
+
-        visible: !root.isVideo
+    width: preferredWidth
+    height: isVideo? previewWidget.height + 80 : preferredHeight
+    Rectangle {
+        id: box
         radius: 5
-        border.color: JamiTheme.tabbarBorderColor
-        color: JamiTheme.backgroundColor
-    }
-
-    Item {
         anchors.fill: parent
-        anchors.margins: 0
+        color: JamiTheme.backgroundColor
-
-        Rectangle {
-            id: rectBox
-
-            anchors.fill: parent
-
-            visible: (isVideo && VideoDevices.listSize !== 0)
-            color: JamiTheme.blackColor
-            radius: 5
-
-            Item {
-                // Else it will be resized by the layer effect
-                id: photoMask
-                visible: false
-                anchors.fill: rectBox
-                Rectangle {
-                    anchors.centerIn: parent
-                    height: parent.height
-                    width: parent.height
-                    radius: height / 2
-                }
-            }
-
-            Image {
-                id: screenshotImg
-                visible: parent.visible && root.isPhoto && btnSend.visible
-
-                anchors.fill: parent
-
-                layer.enabled: true
-                layer.effect: OpacityMask {
-                    maskSource: rectBox
-                }
-
-                Rectangle {
-                    anchors.fill: parent
-                    color: "black"
-                    opacity: 0.6
-
-                    layer.enabled: true
-                    layer.effect: OpacityMask {
-                        anchors.centerIn: parent
-                        maskSource: photoMask
-                        invert: true
-                    }
-                }
-                source: root.photo === "" ? "" : "data:image/png;base64," + root.photo
-            }
-
-            LocalVideo {
-                id: previewWidget
-
-                visible: parent.visible && !screenshotImg.visible
-
-                anchors.fill: rectBox
-                anchors.margins: 1
-
-                rendererId: VideoDevices.getDefaultDevice()
-
-                layer.enabled: true
-                layer.effect: OpacityMask {
-                    maskSource: rectBox
-                }
-
-                Rectangle {
-                    anchors.fill: parent
-                    color: "black"
-                    opacity: 0.6
-                    visible: root.isPhoto
-
-                    layer.enabled: true
-                    layer.effect: OpacityMask {
-                        anchors.centerIn: parent
-                        maskSource: photoMask
-                        invert: true
-                    }
-                }
-            }
-        }
-
-        Label {
-            anchors.centerIn: parent
-
-            width: root.width
-
-            visible: (isVideo && VideoDevices.listSize === 0)
-
-            onVisibleChanged: {
-                if (visible) {
-                    closeRecorder()
-                }
-            }
-
-            text: JamiStrings.previewUnavailable
-            font.pointSize: JamiTheme.settingsFontSize
-            font.kerning: true
-            color: JamiTheme.primaryForegroundColor
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-
-        Timer {
-            id: timer
-
-            interval: 1000
-            running: false
-            repeat: true
-
-            onTriggered: updateTimer()
-        }
-
-        Text {
-            id: time
-
-            anchors.centerIn: recordButton
-            anchors.horizontalCenterOffset: (isVideo ? 100 : 0)
-            anchors.verticalCenterOffset: (isVideo ? 0 : -100)
-
-            visible: !root.isPhoto
-            text: "00:00"
-            color: (isVideo ? JamiTheme.whiteColor : JamiTheme.textColor)
-            font.pointSize: (isVideo ? 12 : 20)
-        }
-
-        PushButton {
-            id: recordButton
-
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 5
-
-            preferredSize: btnSize
-
-            normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
-            hoveredColor: Qt.rgba(255, 255, 255, 0.2)
-
-            source: JamiResources.fiber_manual_record_24dp_svg
-            imageColor: JamiTheme.recordIconColor
-
-            onClicked: {
-                updateState(RecordBox.States.RECORDING)
-                if (!root.isPhoto)
-                    startRecording()
-            }
-        }
-
-        PushButton {
-            id: screenshotBtn
-
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 5
-
-            preferredSize: btnSize
-
-            normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
-            hoveredColor: Qt.rgba(255, 255, 255, 0.2)
-            border.width: 1
-            border.color: imageColor
-
-            source: JamiResources.fiber_manual_record_24dp_svg
-            imageColor: JamiTheme.whiteColor
-
-            onClicked: {
-                root.photo = videoProvider.captureVideoFrame(previewWidget.videoSink)
-                updateState(RecordBox.States.REC_SUCCESS)
-            }
-        }
-
-        PushButton {
-            id: btnStop
-
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 5
-
-            preferredSize: btnSize
-
-            normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
-            hoveredColor: Qt.rgba(255, 255, 255, 0.2)
-
-            source: JamiResources.stop_24dp_red_svg
-            imageColor: isVideo ? JamiTheme.whiteColor : JamiTheme.textColor
-            border.width: 1
-            border.color: imageColor
-
-            onClicked: {
-                if (!root.isPhoto)
-                    stopRecording()
-                updateState(RecordBox.States.REC_SUCCESS)
-            }
-        }
-
-        PushButton {
-            id: btnRestart
-
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.horizontalCenterOffset: -25
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 5
-
-            preferredSize: btnSize
-
-            normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
-
-            source: JamiResources.re_record_24dp_svg
-            hoveredColor: Qt.rgba(255, 255, 255, 0.2)
-            imageColor: isVideo ? JamiTheme.whiteColor : JamiTheme.textColor
-            border.width: 1
-            border.color: imageColor
-
-            onClicked: {
-                if (!root.isPhoto)
-                    stopRecording()
-                updateState(RecordBox.States.INIT)
-            }
-        }
-
-        PushButton {
-            id: btnSend
-
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.horizontalCenterOffset: 25
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 5
-
-            preferredSize: btnSize
-
-            normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
-
-            source: JamiResources.check_black_24dp_svg
-            imageColor: isVideo ? JamiTheme.whiteColor : JamiTheme.textColor
-            border.width: 1
-            border.color: imageColor
-
-            onClicked: {
-                if (!root.isPhoto) {
-                    stopRecording()
-                    sendRecord()
-                } else if (root.photo !== "") {
-                    root.validatePhoto(root.photo)
-                }
-                closeRecorder()
-                updateState(RecordBox.States.INIT)
-            }
-        }
 
         PushButton {
             id: cancelBtn
+            z: 1
 
             normalColor: "transparent"
             hoveredColor: Qt.rgba(255, 255, 255, 0.2)
-            imageColor: JamiTheme.primaryForegroundColor
+            imageColor: isVideo ? JamiTheme.whiteColor : JamiTheme.textColor
 
             preferredSize: 12
 
             source: JamiResources.round_close_24dp_svg
             toolTipText: JamiStrings.back
 
-            anchors.right: parent.right
+            anchors.right: box.right
-            anchors.top: parent.top
+            anchors.top: box.top
             anchors.margins: 8
 
             onClicked: {
@@ -439,5 +176,220 @@ Popup {
                 updateState(RecordBox.States.INIT)
             }
         }
+
+        Item {
+            // Else it will be resized by the layer effect
+            id: photoMask
+            visible: false
+            anchors.fill: parent
+            Rectangle {
+                anchors.centerIn: parent
+                height: parent.height
+                width: parent.height
+                radius: height / 2
+            }
+        }
+
+        Rectangle {
+            id: rectBox
+            visible: false
+            anchors.fill: parent
+            radius: 5
+        }
+
+        ColumnLayout {
+            id: recordItem
+            anchors.fill: parent
+            spacing: 0
+            Layout.alignment: Qt.AlignTop
+
+            // Video
+            Image {
+                id: screenshotImg
+                visible: root.showVideo && root.isPhoto && btnSend.visible
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+
+                sourceSize.width: parent.width
+                sourceSize.height: width * localVideo.invAspectRatio
+
+                source: root.photo === "" ? "" : "data:image/png;base64," + root.photo
+            }
+
+            // video Preview
+            Rectangle {
+                id: previewWidget
+                visible: root.showVideo && !screenshotImg.visible
+
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+                height: localVideo.width * localVideo.invAspectRatio
+                width: parent.width
+
+                color: JamiTheme.primaryForegroundColor
+
+                LocalVideo {
+                    id: localVideo
+                    anchors.fill: parent
+
+                    layer.enabled: true
+                    layer.effect: OpacityMask {
+                        maskSource: rectBox
+                    }
+
+                    Rectangle {
+                        anchors.fill: parent
+                        color: "black"
+                        opacity: 0.6
+                        visible: root.isPhoto
+
+                        layer.enabled: true
+                        layer.effect: OpacityMask {
+                            anchors.centerIn: parent
+                            maskSource: photoMask
+                            invert: true
+                        }
+                    }
+                }
+            }
+
+            RowLayout {
+                id: controls
+                Layout.alignment: Qt.AlignCenter
+                Layout.fillWidth: true
+                spacing: 24
+                Layout.bottomMargin: isVideo ? 8 : 0
+
+                PushButton {
+                    id: recordButton
+
+                    Layout.alignment: Qt.AlignCenter
+
+                    preferredSize: btnSize
+
+                    normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
+                    hoveredColor: Qt.rgba(255, 255, 255, 0.2)
+
+                    source: JamiResources.fiber_manual_record_24dp_svg
+                    imageColor: JamiTheme.recordIconColor
+
+                    onClicked: {
+                        updateState(RecordBox.States.RECORDING)
+                        if (!root.isPhoto)
+                            startRecording()
+                    }
+                }
+
+                PushButton {
+                    id: screenshotBtn
+
+                    Layout.alignment: Qt.AlignCenter
+
+                    preferredSize: btnSize
+
+                    normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
+                    hoveredColor: Qt.rgba(255, 255, 255, 0.2)
+                    border.width: 1
+                    border.color: imageColor
+
+                    source: JamiResources.fiber_manual_record_24dp_svg
+                    imageColor: UtilsAdapter.luma(JamiTheme.backgroundColor) ? "white" : JamiTheme.buttonTintedBlue
+
+                    onClicked: {
+                        root.photo = videoProvider.captureVideoFrame(localVideo.videoSink)
+                        updateState(RecordBox.States.REC_SUCCESS)
+                    }
+                }
+
+                PushButton {
+                    id: btnStop
+
+                    Layout.alignment: Qt.AlignCenter
+
+                    preferredSize: btnSize
+
+                    normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
+                    hoveredColor: Qt.rgba(255, 255, 255, 0.2)
+
+                    source: JamiResources.stop_24dp_red_svg
+                    imageColor: UtilsAdapter.luma(JamiTheme.backgroundColor) ? "white" : JamiTheme.buttonTintedBlue
+                    border.width: 1
+                    border.color: imageColor
+
+                    onClicked: {
+                        if (!root.isPhoto)
+                            stopRecording()
+                        updateState(RecordBox.States.REC_SUCCESS)
+                    }
+                }
+
+                PushButton {
+                    id: btnRestart
+
+                    Layout.alignment: Qt.AlignCenter
+
+                    preferredSize: btnSize
+
+                    normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
+
+                    source: JamiResources.re_record_24dp_svg
+                    hoveredColor: Qt.rgba(255, 255, 255, 0.2)
+                    imageColor: UtilsAdapter.luma(JamiTheme.backgroundColor) ? "white" : JamiTheme.buttonTintedBlue
+                    border.width: 1
+                    border.color: imageColor
+
+                    onClicked: {
+                        if (!root.isPhoto)
+                            stopRecording()
+                        updateState(RecordBox.States.INIT)
+                    }
+                }
+
+                PushButton {
+                    id: btnSend
+
+                    Layout.alignment: Qt.AlignCenter
+
+                    preferredSize: btnSize
+
+                    normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
+
+                    source: JamiResources.check_black_24dp_svg
+                    imageColor: UtilsAdapter.luma(JamiTheme.backgroundColor) ? "white" : JamiTheme.buttonTintedBlue
+                    border.width: 1
+                    border.color: imageColor
+
+                    onClicked: {
+                        if (!root.isPhoto) {
+                            stopRecording()
+                            sendRecord()
+                        } else if (root.photo !== "") {
+                            root.validatePhoto(root.photo)
+                        }
+                        closeRecorder()
+                        updateState(RecordBox.States.INIT)
+                    }
+                }
+
+                Timer {
+                    id: timer
+
+                    interval: 1000
+                    running: false
+                    repeat: true
+
+                    onTriggered: updateTimer()
+                }
+
+                Text {
+                    id: time
+
+                    Layout.alignment: Qt.AlignCenter
+
+                    visible: !root.isPhoto
+                    text: "00:00"
+                    color: JamiTheme.textColor
+                    font.pointSize: (isVideo ? 12 : 20)
+                }
+            }
+        }
     }
 }

src/mainview/components/SidePanel.qml

@@ -131,7 +131,9 @@ Rectangle {
     }
 
     RowLayout {
-        id: startBar
+        id: titleBar
+
+        visible: swarmMemberSearchList.visible
 
         height: 40
         anchors.top: root.top
@@ -141,6 +143,50 @@ Rectangle {
         anchors.right: root.right
         anchors.rightMargin: 15
 
+        Label {
+            id: title
+
+            height: parent.height
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+
+            color: JamiTheme.textColor
+
+            font.bold: true
+            font.pointSize: JamiTheme.contactEventPointSize
+
+            text: JamiStrings.createASwarm
+        }
+
+        PushButton {
+            radius: JamiTheme.primaryRadius
+
+            imageColor: JamiTheme.textColor
+            imagePadding: 8
+            normalColor: JamiTheme.secondaryBackgroundColor
+
+            preferredSize: titleBar.height
+
+            visible: UtilsAdapter.getAppValue(Settings.EnableExperimentalSwarm)
+
+            source: JamiResources.round_close_24dp_svg
+            toolTipText: JamiStrings.cancel
+
+            onClicked: createSwarmClicked()
+        }
+    }
+
+    RowLayout {
+        id: startBar
+
+        height: 40
+        anchors.top: titleBar.visible ? titleBar.bottom : root.top
+        anchors.topMargin: 10
+        anchors.left: root.left
+        anchors.leftMargin: 15
+        anchors.right: root.right
+        anchors.rightMargin: 15
+
         ContactSearchBar {
             id: contactSearchBar
 
@@ -176,7 +222,7 @@ Rectangle {
 
             preferredSize: startBar.height
 
-            visible: UtilsAdapter.getAppValue(Settings.EnableExperimentalSwarm)
+            visible: UtilsAdapter.getAppValue(Settings.EnableExperimentalSwarm) && !swarmMemberSearchList.visible
 
             source: smartListLayout.visible ? JamiResources.create_swarm_svg : JamiResources.round_close_24dp_svg
             toolTipText: smartListLayout.visible ? JamiStrings.startASwarm : JamiStrings.cancel
@@ -365,6 +411,7 @@ Rectangle {
                     } else {
                         root.highlighted = Array.from(root.highlighted).filter(r => r !== UID)
                     }
+                    root.clearContactSearchBar()
                 }
             }
             currentIndex: model.currentFilteredRow

src/mainview/components/SmartListItemDelegate.qml

@@ -108,7 +108,7 @@ ItemDelegate {
                 Layout.fillWidth: true
                 Layout.preferredHeight: 20
                 Layout.alignment: Qt.AlignVCenter
-                elide: Text.ElideRight
+                elide: Text.ElideMiddle
                 text: Title === undefined ? "" : Title
                 font.pointSize: JamiTheme.smartlistItemFontSize
                 font.weight: UnreadMessagesCount ? Font.Bold : Font.Normal
@@ -117,6 +117,7 @@ ItemDelegate {
             RowLayout {
                 visible: ContactType !== Profile.Type.TEMPORARY
                          && LastInteractionDate !== undefined
+                         && interactive
                 Layout.fillWidth: true
                 Layout.preferredHeight: 20
                 Layout.alignment: Qt.AlignTop

src/mainview/components/SwarmDetailsPanel.qml

@@ -41,15 +41,14 @@ Rectangle {
 
         ColumnLayout {
             id: header
+            Layout.topMargin: JamiTheme.swarmDetailsPageTopMargin
             Layout.fillWidth: true
-            spacing: 0
+            spacing: JamiTheme.preferredMarginSize
 
             PhotoboothView {
                 id: currentAccountAvatar
-                inverted: true
+                darkTheme: UtilsAdapter.luma(root.color)
 
-                Layout.topMargin: JamiTheme.swarmDetailsPageTopMargin
-                Layout.bottomMargin: JamiTheme.preferredMarginSize
                 Layout.alignment: Qt.AlignHCenter
 
                 newConversation: true
@@ -61,7 +60,6 @@ Rectangle {
                 id: titleLine
 
                 Layout.alignment: Qt.AlignHCenter
-                Layout.topMargin: JamiTheme.preferredMarginSize
 
                 font.pointSize: JamiTheme.titleFontSize
 
@@ -69,9 +67,23 @@ Rectangle {
                 verticalAlignment: Text.AlignVCenter
 
                 text: CurrentConversation.title
-                placeholderText: JamiStrings.editTitle
+                placeholderText: JamiStrings.groupName
-                placeholderTextColor: UtilsAdapter.luma(root.color) ? JamiTheme.placeholderTextColorWhite : JamiTheme.placeholderTextColor
+                placeholderTextColor: {
-                tooltipText: JamiStrings.editTitle
+                    if (editable) {
+                        if (UtilsAdapter.luma(root.color)) {
+                            return JamiTheme.placeholderTextColorWhite
+                        } else {
+                            return JamiTheme.placeholderTextColor
+                        }
+                    } else {
+                        if (UtilsAdapter.luma(root.color)) {
+                            return JamiTheme.chatviewTextColorLight
+                        } else {
+                            return JamiTheme.chatviewTextColorDark
+                        }
+                    }
+                }
+                tooltipText: JamiStrings.groupName
                 backgroundColor: root.color
                 color: UtilsAdapter.luma(backgroundColor) ?
                         JamiTheme.chatviewTextColorLight :
@@ -86,8 +98,6 @@ Rectangle {
                 id: descriptionLine
 
                 Layout.alignment: Qt.AlignHCenter
-                Layout.topMargin: JamiTheme.preferredMarginSize
-                Layout.bottomMargin: JamiTheme.preferredMarginSize
 
                 font.pointSize: JamiTheme.menuFontSize
 
@@ -95,9 +105,23 @@ Rectangle {
                 verticalAlignment: Text.AlignVCenter
 
                 text: CurrentConversation.description
-                placeholderText: JamiStrings.editDescription
+                placeholderText: JamiStrings.addADescription
-                placeholderTextColor: UtilsAdapter.luma(root.color) ? JamiTheme.placeholderTextColorWhite : JamiTheme.placeholderTextColor
+                placeholderTextColor: {
-                tooltipText: JamiStrings.editDescription
+                    if (editable) {
+                        if (UtilsAdapter.luma(root.color)) {
+                            return JamiTheme.placeholderTextColorWhite
+                        } else {
+                            return JamiTheme.placeholderTextColor
+                        }
+                    } else {
+                        if (UtilsAdapter.luma(root.color)) {
+                            return JamiTheme.chatviewTextColorLight
+                        } else {
+                            return JamiTheme.chatviewTextColorDark
+                        }
+                    }
+                }
+                tooltipText: JamiStrings.addADescription
                 backgroundColor: root.color
                 color: UtilsAdapter.luma(backgroundColor) ?
                         JamiTheme.chatviewTextColorLight :
@@ -113,7 +137,6 @@ Rectangle {
 
                 currentIndex: 1
 
-                Layout.topMargin: JamiTheme.preferredMarginSize
                 Layout.preferredWidth: root.width
                 Layout.preferredHeight: membersTabButton.height
 

src/settingsview/components/AccountProfile.qml

@@ -57,6 +57,7 @@ ColumnLayout {
 
     PhotoboothView {
         id: currentAccountAvatar
+        darkTheme: UtilsAdapter.luma(JamiTheme.primaryBackgroundColor)
 
         Layout.alignment: Qt.AlignCenter
 

src/wizardview/components/ProfilePage.qml

@@ -101,6 +101,7 @@ Rectangle {
             objectName: "setAvatarWidget"
 
             Layout.alignment: Qt.AlignCenter
+            darkTheme: UtilsAdapter.luma(JamiTheme.primaryBackgroundColor)
 
             enabled: !saveProfileBtn.spinnerTriggered
             imageId: createdAccountId