wizard: implement new wizard details

This changes many things:
+ Except the backup page, all pages were re-designed
+ Heavily modify buttons and line edits with new components style
+ Update switches themes
+ Re-work username
+ Add future components
+ Update strings
+ Update PhotoBoothView

GitLab: #769
GitLab: #770
GitLab: #766
Change-Id: Ic97d36cf8c86c4242013bf71a524887f7ce56f8f

qml.qrc

@@ -192,5 +192,9 @@
         <file>src/app/mainview/components/KeyboardShortcutTabButton.qml</file>
         <file>src/app/LayoutManager.qml</file>
         <file>src/app/mainview/components/JamiIdentifier.qml</file>
+        <file>src/app/commoncomponents/PasswordLineEdit.qml</file>
+        <file>src/app/wizardview/components/NoUsernamePopup.qml</file>
+        <file>src/app/wizardview/components/AdvancedAccountSettings.qml</file>
+        <file>src/app/commoncomponents/InfoBox.qml</file>
     </qresource>
 </RCC>

src/app/AccountMigrationView.qml

@@ -337,7 +337,7 @@ Rectangle {
                             color: enabled? JamiTheme.buttonTintedBlack : JamiTheme.buttonTintedGrey
                             hoveredColor: JamiTheme.buttonTintedBlackHovered
                             pressedColor: JamiTheme.buttonTintedBlackPressed
-                            outlined: true
+                            secondary: true
                             enabled: passwordInputLineEdit.text.length > 0
 
                             text: JamiStrings.authenticate
@@ -355,7 +355,7 @@ Rectangle {
                             color: JamiTheme.buttonTintedRed
                             hoveredColor: JamiTheme.buttonTintedRedHovered
                             pressedColor: JamiTheme.buttonTintedRedPressed
-                            outlined: true
+                            secondary: true
 
                             text: JamiStrings.deleteAccount
                             onClicked: slotDeleteButtonClicked()

src/app/accountadapter.cpp

@@ -98,6 +98,8 @@ AccountAdapter::createJamiAccount(QString registeredName,
         &lrcInstance_->accountModel(),
         &lrc::api::AccountModel::accountAdded,
         [this, registeredName, settings, isCreating](const QString& accountId) {
+            lrcInstance_->accountModel().setAvatar(accountId, settings["avatar"].toString());
+
             Utils::oneShotConnect(&lrcInstance_->accountModel(),
                                   &lrc::api::AccountModel::accountDetailsChanged,
                                   [this](const QString& accountId) {
@@ -161,6 +163,7 @@ AccountAdapter::createSIPAccount(const QVariantMap& settings)
         &lrcInstance_->accountModel(),
         &lrc::api::AccountModel::accountAdded,
         [this, settings](const QString& accountId) {
+            lrcInstance_->accountModel().setAvatar(accountId, settings["avatar"].toString());
             Utils::oneShotConnect(&lrcInstance_->accountModel(),
                                   &lrc::api::AccountModel::accountDetailsChanged,
                                   [this](const QString& accountId) {

src/app/commoncomponents/ConfirmDialog.qml

@@ -73,7 +73,7 @@ BaseModalDialog {
                 color: JamiTheme.buttonTintedRed
                 hoveredColor: JamiTheme.buttonTintedRedHovered
                 pressedColor: JamiTheme.buttonTintedRedPressed
-                outlined: true
+                secondary: true
 
                 onClicked: {
                     close()
@@ -92,7 +92,7 @@ BaseModalDialog {
                 color: JamiTheme.buttonTintedBlack
                 hoveredColor: JamiTheme.buttonTintedBlackHovered
                 pressedColor: JamiTheme.buttonTintedBlackPressed
-                outlined: true
+                secondary: true
 
                 text: JamiStrings.optionCancel
 

src/app/commoncomponents/DaemonReconnectPopup.qml

@@ -91,7 +91,7 @@ BaseModalDialog {
             color: JamiTheme.buttonTintedBlue
             hoveredColor: JamiTheme.buttonTintedBlueHovered
             pressedColor: JamiTheme.buttonTintedBluePressed
-            outlined: true
+            secondary: true
 
             onClicked: Qt.quit()
         }

src/app/commoncomponents/DeleteAccountDialog.qml

@@ -133,7 +133,7 @@ BaseModalDialog {
                 color: JamiTheme.buttonTintedRed
                 hoveredColor: JamiTheme.buttonTintedRedHovered
                 pressedColor: JamiTheme.buttonTintedRedPressed
-                outlined: true
+                secondary: true
 
                 text: JamiStrings.optionDelete
 
@@ -172,7 +172,7 @@ BaseModalDialog {
                 color: JamiTheme.buttonTintedBlack
                 hoveredColor: JamiTheme.buttonTintedBlackHovered
                 pressedColor: JamiTheme.buttonTintedBlackPressed
-                outlined: true
+                secondary: true
 
                 text: JamiStrings.optionCancel
 

src/app/commoncomponents/EditableLineEdit.qml

@@ -29,27 +29,76 @@ Item {
     id: root
 
     signal editingFinished
+    signal accepted
+    signal secondIcoClicked
 
+    property alias fontSize: lineEdit.fontSize
+    property color borderColor: lineEdit.borderColor
+    property alias underlined: lineEdit.underlined
+    property alias wrapMode: lineEdit.wrapMode
+    property alias padding: lineEdit.padding
+    property alias fieldLayoutWidth: lineEdit.fieldLayoutWidth
+    property alias fieldLayoutHeight: lineEdit.fieldLayoutHeight
+    property alias echoMode: lineEdit.echoMode
+    property string inactiveColor: JamiTheme.tintedBlue
+    property string hoveredColor: "#03B9E9"
+    property string selectedColor: "#03B9E9"
+    property string validatedColor: "#009980"
+    property string errorColor: "#CC0022"
+    property alias selectByMouse:lineEdit.selectByMouse
+    property alias loseFocusWhenEnterPressed: lineEdit.loseFocusWhenEnterPressed
+    property alias validator: lineEdit.validator
     property alias text: lineEdit.text
     property alias color: lineEdit.color
     property alias verticalAlignment: lineEdit.verticalAlignment
     property alias horizontalAlignment: lineEdit.horizontalAlignment
     property alias font: lineEdit.font
-    property alias placeholderText: lineEdit.placeholderText
+    property var placeholderText
     property alias placeholderTextColor: lineEdit.placeholderTextColor
     property alias backgroundColor: lineEdit.backgroundColor
-    property var editIconColor:  UtilsAdapter.luma(root.color) ? JamiTheme.editLineColor : "white"
+    property var editIconColor: "transparent"
     property var cancelIconColor: UtilsAdapter.luma(root.color) ? JamiTheme.buttonTintedBlue : "white"
+    property string informationToolTip: ""
+
+    property string firstIco: ""
+    property string secondIco: ""
+    property string thirdIco: ""
+
+    property string firstIcoColor: "#005699"
+    property string secondIcoColor: "#005699"
+    property string thirdIcoColor: "#005699"
 
     property bool readOnly: false
     property bool editable: false
     property bool hovered: false
+    property bool selected: false
+    property bool inactive: true
+    property bool validated: false
+    property bool error: false
+
     property string tooltipText: ""
     property int preferredWidth: JamiTheme.preferredFieldWidth
 
+    function clear() {
+        lineEdit.clear()
+    }
+
+    function toggleEchoMode(){
+        if (echoMode == TextInput.Normal) {
+            echoMode = TextInput.Password
+            secondIco = JamiResources.eye_cross_svg
+        } else {
+            echoMode = TextInput.Normal
+            secondIco = JamiResources.noun_eye_svg
+        }
+    }
+
     height: lineEdit.height
     width: preferredWidth
 
+    Layout.preferredHeight: 50
+    Layout.preferredWidth:  400
+
     MaterialToolTip {
         parent: lineEdit
         visible: tooltipText != "" && hovered
@@ -58,32 +107,47 @@ Item {
     }
 
     HoverHandler {
-        target : parent
+        target: parent
+        enabled: !root.readOnly
         onHoveredChanged: {
             root.hovered = hovered
         }
-        cursorShape: Qt.PointingHandCursor
     }
 
-    RowLayout {
+    TapHandler {
+        target: parent
+        enabled: !root.readOnly
+        onTapped: {
+            lineEdit.focus = true;
+        }
+    }
+
+    Item {
+
         id: row
-        anchors.centerIn: parent
+        anchors.fill: parent
+
         z: 1
 
-        Image {
-            id: editImg
-            opacity: editable && !root.readOnly
+        ResponsiveImage  {
+            id: firstIco_
+            opacity: editable && !root.readOnly && firstIco !== ""
+            visible: opacity
+            anchors.left: row.left
+            anchors.bottom: row.bottom
+            anchors.bottomMargin: 12
 
-            Layout.alignment: Qt.AlignVCenter
+            width: visible? 18 : 0
+            height: 18
 
             layer {
                 enabled: true
                 effect: ColorOverlay {
-                    color: root.editIconColor
+                    color:  firstIcoColor
                 }
             }
 
-            source: JamiResources.round_edit_24dp_svg
+            source: firstIco
 
             Behavior on opacity {
                 NumberAnimation {
@@ -95,20 +159,23 @@ Item {
 
         MaterialLineEdit {
             id: lineEdit
-
+            anchors.horizontalCenter: row.horizontalCenter
+            width: row.width - firstIco_.width - thirdIco_.width - secIco_.width - thirdIco_.anchors.rightMargin
+            height: row.height
             readOnly: !editable || root.readOnly
             underlined: true
+            verticalAlignment: Text.AlignBottom
 
             borderColor: root.editIconColor
-            fieldLayoutHeight: 24
-
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: root.preferredFieldWidth - editImg.width - btnCancel.width
-            Layout.fillHeight: true
+            fieldLayoutHeight: row.height
+            placeholderText: readOnly? root.placeholderText : ""
 
             wrapMode: Text.NoWrap
+            horizontalAlignment: !readOnly || text !== "" ? Qt.AlignLeft : Qt.AlignHCenter
 
             onFocusChanged: function(focus) {
+                if (root.readOnly)
+                    return
                 if (!focus && editable) {
                     editable = !editable
                     root.editingFinished()
@@ -119,30 +186,32 @@ Item {
             }
             onAccepted: {
                 editable = !editable
+                root.accepted()
                 root.editingFinished()
+                focus = false
             }
         }
 
-        PushButton {
-            id: btnCancel
+        ResponsiveImage  {
+            id: thirdIco_
+            anchors.right: secIco_.left
+            anchors.rightMargin: 12
+            anchors.bottom: row.bottom
+            anchors.bottomMargin: 12
 
-            Layout.alignment: Qt.AlignVCenter
+            visible: thirdIco !== ""
+            width: visible? 18 : 0
+            height: 18
 
-            enabled: editable && !root.readOnly
-            preferredSize: lineEdit.height * 2 / 3
-            opacity: enabled ? 0.8 : 0
-            imageColor: root.cancelIconColor
-            normalColor: "transparent"
-            hoveredColor: JamiTheme.hoveredButtonColor
-
-            source: JamiResources.round_close_24dp_svg
-
-            onClicked: {
-                root.editingFinished()
-                root.editable = !root.editable
-                lineEdit.forceActiveFocus()
+            layer {
+                enabled: true
+                effect: ColorOverlay {
+                    color: thirdIcoColor
+                }
             }
 
+            source: thirdIco
+
             Behavior on opacity {
                 NumberAnimation {
                     from: 0
@@ -150,25 +219,88 @@ Item {
                 }
             }
         }
+
+        ResponsiveImage  {
+
+            id: secIco_
+            visible: (editable && !root.readOnly) || secondIco !== ""
+            source: secondIco
+            anchors.right: row.right
+            anchors.bottom: row.bottom
+            anchors.bottomMargin: 12
+            width: visible? 18 : 0
+            height: 18
+
+            MaterialToolTip {
+                id: toolTip
+                parent: secIco_
+                text: informationToolTip
+                textColor: "black"
+                backGroundColor: "white"
+                visible: parent.hovered && informationToolTip!==""
+                delay: Qt.styleHints.mousePressAndHoldInterval
+            }
+
+            layer {
+                enabled: true
+                effect: ColorOverlay {
+                    color: secondIcoColor
+                }
+            }
+
+            TapHandler{
+                target: parent
+                enabled: !root.readOnly
+                onTapped: {
+                    root.secondIcoClicked()
+                }
+
+            }
+
+            Behavior on opacity {
+                NumberAnimation {
+                    from: 0
+                    duration: JamiTheme.longFadeDuration
+                }
+            }
+
+        }
+
     }
 
+
     Rectangle {
-        anchors.fill: row
+        id: barColor
+        anchors.fill: root
         radius: JamiTheme.primaryRadius
 
-        visible: (root.editable || root.hovered)  && !root.readOnly
-        color: root.editIconColor
+        visible: !readOnly
+        color: {
+            if(root.error)
+                return errorColor
+            if(root.validated)
+                return validatedColor
+            if(root.hovered || root.editable)
+                return hoveredColor
+            if(root.inactive)
+                return inactiveColor
+            if(root.editable)
+                return selectedColor
+            return "black"
+
+        }
 
         Rectangle {
-            visible: parent.visible
+            visible: !readOnly && parent.visible
             anchors {
                 fill: parent
                 topMargin: 0
-                rightMargin: 0
+                rightMargin: -1
                 bottomMargin: 1
-                leftMargin: 0
+                leftMargin: -1
             }
             color: root.backgroundColor
         }
     }
-}
+
+}

src/app/commoncomponents/InfoBox.qml

@@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ * Author: Fadi Shehadeh <fadi.shehadeh@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+import net.jami.Models 1.1
+import net.jami.Constants 1.1
+
+
+Rectangle {
+
+    id: root
+
+    property string icoSource: ""
+    property string icoColor: JamiTheme.tintedBlue
+    property string title: ""
+    property string description: ""
+
+    width: 190
+    height: infos.implicitHeight
+
+    color: JamiTheme.transparentColor
+
+    ColumnLayout {
+        id: infos
+        anchors.fill:  parent
+
+        RowLayout {
+
+            Layout.alignment: Qt.AlignLeft
+            spacing: 24
+
+            ResponsiveImage {
+                id: icon
+
+                Layout.alignment: Qt.AlignLeft
+                Layout.topMargin: 5
+                Layout.preferredWidth: 26
+                Layout.preferredHeight: 26
+
+                containerHeight: Layout.preferredHeight
+                containerWidth: Layout.preferredWidth
+
+                source: icoSource
+                color: icoColor
+
+            }
+
+            Label {
+
+                text: title
+                font.weight: Font.Medium
+                Layout.topMargin: 5
+                Layout.alignment: Qt.AlignCenter
+                color: JamiTheme.textColor
+                font.pixelSize: JamiTheme.infoBoxTitleFontSize
+
+            }
+        }
+
+        Text {
+
+            Layout.preferredWidth: 180
+            Layout.alignment: Qt.AlignLeft
+            Layout.topMargin: 8
+            Layout.bottomMargin: 15
+            font.pixelSize: JamiTheme.infoBoxDescFontSize
+            color: JamiTheme.textColor
+            wrapMode: Text.WordWrap
+            text: description
+
+        }
+    }
+
+}

src/app/commoncomponents/JamiSwitch.qml

@@ -46,9 +46,7 @@ Switch {
         y: parent.height / 2 - height / 2
 
         radius: JamiTheme.switchIndicatorRadius
-
-        color: root.checked ? JamiTheme.switchBackgroundCheckedColor :
-                              JamiTheme.switchBackgroundColor
+        color: JamiTheme.switchBackgroundColor
         border.color: handleBackground.color
 
         Rectangle {
@@ -64,9 +62,8 @@ Switch {
 
             color: root.checked ? JamiTheme.switchHandleCheckedColor :
                                   JamiTheme.switchHandleColor
-            border.color: root.focus ? (root.checked ? JamiTheme.switchHandleCheckedBorderColor :
-                                                       JamiTheme.switchHandleBorderColor) :
-                                       JamiTheme.transparentColor
+            border.color: root.checked ? JamiTheme.switchHandleCheckedBorderColor :
+                                         JamiTheme.switchHandleBorderColor
         }
     }
 

src/app/commoncomponents/MaterialButton.qml

@@ -28,31 +28,37 @@ import net.jami.Constants 1.1
 AbstractButton {
     id: root
 
-    property bool outlined: false
+    property bool boldFont: false
+    property bool primary: false
+    property bool secondary: false
+    property bool tertiary: false
     property alias toolTipText: toolTip.text
     property alias iconSource: icon.source_
     property alias animatedIconSource: icon.animatedSource_
     property real iconSize: 18
     property var color: JamiTheme.buttonTintedBlue
     property var hoveredColor: JamiTheme.buttonTintedBlueHovered
+    property var secHoveredColor: JamiTheme.transparentColor
     property var pressedColor: JamiTheme.buttonTintedBluePressed
     property var keysNavigationFocusColor: Qt.darker(hoveredColor, 2)
     property bool hasIcon: animatedIconSource.length !== 0 ||
                            iconSource.length !== 0
 
     property var preferredWidth
+
     Binding on width {
         when: root.preferredWidth !== undefined ||
               root.Layout.fillWidth
         value: root.preferredWidth
     }
+
     Binding on Layout.preferredWidth {
         when: root.preferredWidth !== undefined ||
               root.Layout.fillWidth
         value: width
     }
 
-    property real preferredHeight: 36
+    property real preferredHeight: JamiTheme.pushButtonMargin*2 + textButton.height
     height: preferredHeight
     Layout.preferredHeight: height
 
@@ -71,12 +77,15 @@ AbstractButton {
     }
 
     property string contentColorProvider: {
-        if (!root.outlined)
+
+        if (root.primary)
             return "white"
-        if (root.hovered)
-            return root.hoveredColor
+        if (root.tertiary)
+            return JamiTheme.secAndTertiTextColor
         if (root.down)
             return root.pressedColor
+        if (!root.secondary)
+            return "white"
         return root.color
     }
 
@@ -88,7 +97,9 @@ AbstractButton {
                   !root.Layout.fillWidth
             value: item.childrenRect.width
         }
+
         implicitHeight: childrenRect.height
+
         RowLayout {
             anchors.verticalCenter: parent.verticalCenter
             Binding on width {
@@ -96,6 +107,7 @@ AbstractButton {
                       root.Layout.fillWidth
                 value: root.availableWidth
             }
+
             spacing: hasIcon ?
                          JamiTheme.preferredMarginSize :
                          0
@@ -146,8 +158,9 @@ AbstractButton {
             }
 
             Text {
-                // this right margin will make the text visually
-                // centered within button
+
+                id: textButton
+
                 Layout.rightMargin: {
                     if ((!hasIcon || root.preferredWidth === undefined) &&
                             !root.Layout.fillWidth)
@@ -155,41 +168,61 @@ AbstractButton {
                     return icon.width + JamiTheme.preferredMarginSize / 2 +
                             parent.spacing
                 }
+
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter
+
                 text: root.text
-                font: root.font
+
                 elide: Text.ElideRight
                 verticalAlignment: Text.AlignVCenter
                 horizontalAlignment: Text.AlignHCenter
                 color: contentColorProvider
+                font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
             }
         }
     }
 
     background: Rectangle {
+
         color: {
-            if (root.outlined)
-                return "transparent"
-            if (root.hovered)
-                return root.hoveredColor
+            var baseColor = root.focus ? root.keysNavigationFocusColor : root.color
+            if(root.primary) {
+                if (root.hovered)
+                    return root.hoveredColor
+                return baseColor
+            }
+
+            if (root.secondary || root.tertiary) {
+                if (root.hovered || root.focus)
+                    return root.secHoveredColor
+                return JamiTheme.transparentColor
+            }
+
             if (root.down)
                 return root.pressedColor
-            return root.focus ?
-                        root.keysNavigationFocusColor :
-                        root.color
+            if (root.hovered)
+                return root.hoveredColor
+
+            return baseColor
+
         }
+
         border.color: {
-            if (!root.outlined)
-                return "transparent"
-            if (root.hovered)
+            if (root.primary || root.tertiary)
+                return JamiTheme.transparentColor
+
+            if (root.secondary && root.hovered)
                 return root.hoveredColor
+
             if (root.down)
                 return root.pressedColor
+
             return root.focus ?
                         root.keysNavigationFocusColor :
                         root.color
         }
+
         radius: JamiTheme.primaryRadius
     }
 

src/app/commoncomponents/MaterialLineEdit.qml

@@ -25,10 +25,11 @@ import net.jami.Constants 1.1
 TextField {
     id: root
 
+    property int fontSize: JamiTheme.materialLineEditPointSize
     property int fieldLayoutWidth: 256
     property int fieldLayoutHeight: 48
 
-    property var backgroundColor: JamiTheme.editBackgroundColor
+    property var backgroundColor: JamiTheme.secondaryBackgroundColor
     property var borderColor: JamiTheme.greyBorderColor
 
     property bool loseFocusWhenEnterPressed: false
@@ -44,11 +45,11 @@ TextField {
     mouseSelectionMode: TextInput.SelectCharacters
     selectionColor: JamiTheme.placeholderTextColor
 
-    font.pointSize: JamiTheme.materialLineEditPointSize
+    font.pointSize: fontSize
     font.kerning: true
+    color: JamiTheme.textColor
 
     placeholderTextColor: JamiTheme.placeholderTextColor
-    color: JamiTheme.textColor
 
     LineEditContextMenu {
         id: lineEditContextMenu
@@ -58,6 +59,7 @@ TextField {
     }
 
     background: Rectangle {
+
         anchors.fill: root
         radius: JamiTheme.primaryRadius
 
@@ -71,15 +73,15 @@ TextField {
         }
 
         Rectangle {
-            visible: !readOnly && underlined
+            visible: true
             anchors {
                 fill: parent
                 topMargin: 0
-                rightMargin: 0
+                rightMargin: -1
                 bottomMargin: 1
-                leftMargin: 0
+                leftMargin: -1
             }
-            color: backgroundColor
+            color: root.backgroundColor
         }
     }
 

src/app/commoncomponents/MaterialToolTip.qml

@@ -24,6 +24,9 @@ import net.jami.Constants 1.1
 ToolTip {
     id: root
 
+    property alias backGroundColor: background.color
+    property alias textColor: label.color
+
     onVisibleChanged: {
         if (visible)
             animation.start()
@@ -32,11 +35,12 @@ ToolTip {
     contentItem: Text {
         id: label
         text: root.text
-        font: root.font
+        font.pixelSize: 13
         color: "white"
     }
 
     background: Rectangle {
+        id: background
         color: "#c4272727"
         radius: 5
     }

src/app/commoncomponents/PasswordDialog.qml

@@ -186,7 +186,7 @@ BaseModalDialog {
                 color: enabled? JamiTheme.buttonTintedBlack : JamiTheme.buttonTintedGrey
                 hoveredColor: JamiTheme.buttonTintedBlackHovered
                 pressedColor: JamiTheme.buttonTintedBlackPressed
-                outlined: true
+                secondary: true
                 enabled: purpose === PasswordDialog.SetPassword
 
                 text: (purpose === PasswordDialog.ExportAccount) ? JamiStrings.exportAccount :
@@ -208,7 +208,7 @@ BaseModalDialog {
                 color: JamiTheme.buttonTintedBlack
                 hoveredColor: JamiTheme.buttonTintedBlackHovered
                 pressedColor: JamiTheme.buttonTintedBlackPressed
-                outlined: true
+                secondary: true
 
                 text: JamiStrings.optionCancel
 

src/app/commoncomponents/PhotoboothView.qml

@@ -31,7 +31,8 @@ Item {
     id: root
 
     property alias imageId: avatar.imageId
-    property bool newConversation: false
+
+    property bool newItem: false
     property bool readOnly: false
     property real avatarSize
     property real buttonSize: avatarSize
@@ -71,10 +72,10 @@ Item {
         visible: false
 
         onValidatePhoto: function(photo) {
-            if (!root.newConversation)
+            if (!root.newItem)
                 AccountAdapter.setCurrentAccountAvatarBase64(photo)
             else
-                UtilsAdapter.setSwarmCreationImageFromString(photo, imageId)
+                UtilsAdapter.setTempCreationImageFromString(photo, imageId)
             buttonsRowLayout.backToAvatar()
         }
     }
@@ -106,10 +107,10 @@ Item {
             }
 
             var filePath = UtilsAdapter.getAbsPath(file)
-            if (!root.newConversation)
+            if (!root.newItem)
                 AccountAdapter.setCurrentAccountAvatarFile(filePath)
             else
-                UtilsAdapter.setSwarmCreationImageFromFile(filePath, root.imageId)
+                UtilsAdapter.setTempCreationImageFromFile(filePath, root.imageId)
         }
 
         onRejected: {
@@ -120,12 +121,13 @@ Item {
         }
     }
 
-    Item {
+    Rectangle {
         id: imageLayer
 
         anchors.centerIn: parent
         width: avatarSize
         height: avatarSize
+        color: "transparent"
 
         Avatar {
             id: avatar
@@ -133,61 +135,37 @@ Item {
             anchors.fill: parent
             anchors.margins: 1
 
-            mode: newConversation? Avatar.Mode.Conversation : Avatar.Mode.Account
+            mode: newItem? Avatar.Mode.Conversation : Avatar.Mode.Account
 
             fillMode: Image.PreserveAspectCrop
             showPresenceIndicator: false
 
-            HoverHandler {
-                target: parent
-                enabled: parent.visible && !root.readOnly
-                onHoveredChanged: {
-                    overlayHighlighted.visible = hovered
-                }
-            }
+            PushButton {
+                id: editImage
+
+                width: avatar.width / 4
+                height: avatar.height / 4
+                anchors.top: parent.top
+                anchors.right: parent.right
+                anchors.margins: avatar.width / 22
+
+                source: JamiResources.round_edit_24dp_svg
+
+                preferredSize: avatar.width / 6
+
+                border.color: JamiTheme.buttonTintedBlue
+                normalColor: "white"
+                imageColor:  JamiTheme.buttonTintedBlue
+                hoveredColor: "#e5eef5"
+                pressedColor: "#e5eef5"
+                enabled: avatar.visible && !root.readOnly
+
+                onClicked :{
 
-            TapHandler {
-                target: parent
-                enabled: parent.visible && !root.readOnly
-                onTapped: {
                     imageLayer.visible = false
                     buttonsRowLayout.visible = true
                 }
             }
-
-            Rectangle {
-                id: overlayHighlighted
-                visible: false
-
-                anchors.fill: parent
-                color: Qt.rgba(0, 0, 0, 0.5)
-                radius: parent.height / 2
-
-                opacity: visible
-
-                Behavior on opacity {
-                    NumberAnimation {
-                        from: 0
-                        duration: JamiTheme.shortFadeDuration
-                    }
-                }
-
-                Image {
-                    id: overlayImage
-
-                    width: JamiTheme.smartListAvatarSize / 2
-                    height: JamiTheme.smartListAvatarSize / 2
-                    anchors.centerIn: parent
-
-                    layer {
-                        enabled: true
-                        effect: ColorOverlay {
-                            color: "white"
-                        }
-                    }
-                    source: JamiResources.round_edit_24dp_svg
-                }
-            }
         }
     }
 
@@ -283,7 +261,7 @@ Item {
                     clicked()
                     keyEvent.accepted = true
                 } else if (keyEvent.key === Qt.Key_Down ||
-                            keyEvent.key === Qt.Key_Tab) {
+                           keyEvent.key === Qt.Key_Tab) {
                     clearButton.forceActiveFocus()
                     keyEvent.accepted = true
                 }
@@ -318,9 +296,9 @@ Item {
             hoveredColor: darkTheme ? Qt.rgba(255, 255, 255, 0.2) : JamiTheme.buttonTintedBlueInternalHover
 
             visible: {
-                if (!newConversation && LRCInstance.currentAccountAvatarSet)
+                if (!newItem && LRCInstance.currentAccountAvatarSet)
                     return true
-                if (newConversation && UtilsAdapter.swarmCreationImage(imageId).length !== 0)
+                if (newItem && UtilsAdapter.tempCreationImage(imageId).length !== 0)
                     return true
                 return false
             }
@@ -334,17 +312,17 @@ Item {
                     importButton.forceActiveFocus()
                     keyEvent.accepted = true
                 } else if (keyEvent.key === Qt.Key_Down ||
-                            keyEvent.key === Qt.Key_Tab) {
+                           keyEvent.key === Qt.Key_Tab) {
                     cancelButton.forceActiveFocus()
                     keyEvent.accepted = true
                 }
             }
 
             onClicked: {
-                if (!root.newConversation)
+                if (!root.newItem)
                     AccountAdapter.setCurrentAccountAvatarBase64()
                 else
-                    UtilsAdapter.setSwarmCreationImageFromString("", imageId)
+                    UtilsAdapter.setTempCreationImageFromString("", imageId)
                 stopBooth()
                 buttonsRowLayout.backToAvatar()
             }
@@ -370,7 +348,7 @@ Item {
                     takePhotoButton.forceActiveFocus()
                     keyEvent.accepted = true
                 } else if (keyEvent.key === Qt.Key_Down ||
-                            keyEvent.key === Qt.Key_Tab) {
+                           keyEvent.key === Qt.Key_Tab) {
                     importButton.forceActiveFocus()
                     keyEvent.accepted = true
                 }

src/app/commoncomponents/PushButton.qml

@@ -40,6 +40,7 @@ AbstractButton {
     property int preferredWidth: 0
     property int preferredMargin: 16
     // Note the radius will default to preferredSize
+    property bool circled: true
     property alias radius: background.radius
     property alias border: background.border
 
@@ -147,7 +148,7 @@ AbstractButton {
     background: Rectangle {
         id: background
 
-        radius: preferredSize
+        radius: circled ? preferredSize : 5
 
         states: [
             State {
@@ -182,5 +183,6 @@ AbstractButton {
                 ColorAnimation { duration: root.duration }
             }
         ]
+
     }
 }

src/app/commoncomponents/ResponsiveImage.qml

@@ -34,6 +34,7 @@ Item {
     property alias source: image.source
     property alias status: image.status
     property string color: "transparent"
+    property bool hovered: false
 
     property bool isSvg: {
         var match = /[^.]+$/.exec(source)
@@ -80,4 +81,14 @@ Item {
         source: image
         color: root.color
     }
+
+    HoverHandler {
+        target: parent
+        onHoveredChanged: {
+            root.hovered = hovered
+
+        }
+    }
+
+
 }

src/app/commoncomponents/SettingParaCombobox.qml

@@ -44,7 +44,9 @@ ComboBox {
 
     delegate: ItemDelegate {
         width: root.width
+
         contentItem: Text {
+
             text: {
                 if (index >= 0) {
                     var currentItem = root.delegateModel.items.get(index)
@@ -52,42 +54,32 @@ ComboBox {
                 }
                 return ""
             }
-            color: JamiTheme.textColor
-            font: root.font
+
+            color: hovered ? JamiTheme.comboboxTextColorHovered : JamiTheme.textColor
             elide: Text.ElideRight
             verticalAlignment: Text.AlignVCenter
+
         }
+
         background: Rectangle {
-            color: highlighted? JamiTheme.selectedColor : JamiTheme.editBackgroundColor
+            color: hovered ? JamiTheme.tintedBlue : JamiTheme.transparentColor
+            opacity: 0.1
         }
+
     }
 
-    indicator: Canvas {
-        id: canvas
+    indicator: ResponsiveImage {
+        containerHeight: 6
+        containerWidth: 10
+        width: 20
+        height: 20
 
-        x: root.width - width - root.rightPadding
-        y: root.topPadding + (root.availableHeight - height) / 2
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.rightMargin: 16
 
-        width: 12
-        height: 8
-        contextType: "2d"
-
-        Connections {
-            target: root
-            function onPressedChanged(){
-                canvas.requestPaint()
-            }
-        }
-
-        onPaint: {
-            context.reset();
-            context.moveTo(0, 0);
-            context.lineTo(width, 0);
-            context.lineTo(width / 2, height);
-            context.closePath();
-            context.fillStyle = root.pressed ? JamiTheme.pressColor : JamiTheme.textColor;
-            context.fill();
-        }
+        source: popup.visible ? JamiResources.expand_less_24dp_svg
+                              : JamiResources.expand_more_24dp_svg
     }
 
     contentItem: Text {
@@ -95,19 +87,22 @@ ComboBox {
         rightPadding: root.indicator.width + leftPadding
 
         text: root.displayText
-        font: root.font
         color: JamiTheme.textColor
+
         verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
         elide: Text.ElideRight
     }
 
     background: Rectangle {
-        color: root.comboBoxBackgroundColor
+        id: selectOption
+        color: JamiTheme.transparentColor
         implicitWidth: 120
-        implicitHeight: 40
-        border.color: root.comboBoxBackgroundColor
+        implicitHeight: 43
+        border.color: popup.visible ? JamiTheme.comboboxBorderColorActive
+                                    : JamiTheme.comboboxBorderColor
         border.width: root.visualFocus ? 2 : 1
-        radius: 2
+        radius: 5
     }
 
     popup: Popup {
@@ -115,8 +110,8 @@ ComboBox {
 
         y: root.height - 1
         width: root.width
-        implicitHeight: contentItem.implicitHeight
         padding: 1
+        height: Math.min(contentItem.implicitHeight, 5 * selectOption.implicitHeight)
 
         contentItem: JamiListView {
             id: listView
@@ -126,9 +121,11 @@ ComboBox {
         }
 
         background: Rectangle {
-            color: JamiTheme.editBackgroundColor
-            border.color: JamiTheme.greyBorderColor
-            radius: 2
+            color: JamiTheme.primaryBackgroundColor
+            border.color: JamiTheme.comboboxBorderColorActive
+            radius: 5
         }
+
     }
+
 }

src/app/commoncomponents/SimpleMessageDialog.qml

@@ -121,7 +121,7 @@ BaseModalDialog {
                             return JamiTheme.buttonTintedRedPressed
                         }
                     }
-                    outlined: true
+                    secondary: true
 
                     text: buttonTitles[modelData]
 

src/app/commoncomponents/UsernameLineEdit.qml

@@ -22,9 +22,23 @@ import Qt5Compat.GraphicalEffects
 import net.jami.Models 1.1
 import net.jami.Constants 1.1
 
-MaterialLineEdit {
+EditableLineEdit {
     id: root
 
+    placeholderText: isRendezVous ? JamiStrings.chooseAName :
+                                    JamiStrings.chooseYourUserName
+
+    firstIco: readOnly? "" : JamiResources.person_24dp_svg
+    firstIcoColor: "#03B9E9"
+
+    secondIco: readOnly? "" : JamiResources.outline_info_24dp_svg
+    secondIcoColor: "#005699"
+
+    informationToolTip: JamiStrings.usernameToolTip
+
+    fieldLayoutWidth: 200
+    fieldLayoutHeight: 50
+
     enum NameRegistrationState {
         BLANK,
         INVALID,
@@ -34,7 +48,6 @@ MaterialLineEdit {
     }
 
     property int nameRegistrationState: UsernameLineEdit.NameRegistrationState.BLANK
-    property var __iconSource: ""
 
     selectByMouse: true
     font.pointSize: JamiTheme.usernameLineEditPointSize
@@ -83,56 +96,32 @@ MaterialLineEdit {
         }
     }
 
-    ResponsiveImage {
-        id: lineEditImage
-
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.right: parent.right
-        anchors.rightMargin: JamiTheme.preferredMarginSize / 2
-
-        visible: nameRegistrationState !== UsernameLineEdit.NameRegistrationState.SEARCHING
-        source: nameRegistrationState === UsernameLineEdit.NameRegistrationState.SEARCHING ?
-                    "" : __iconSource
-        color: borderColor
-    }
-
-    AnimatedImage {
-        anchors.left: lineEditImage.left
-        anchors.verticalCenter: parent.verticalCenter
-
-        width: 24
-        height: 24
-
-        source: nameRegistrationState !== UsernameLineEdit.NameRegistrationState.SEARCHING ?
-                    "" : __iconSource
-        playing: true
-        paused: false
-        fillMode: Image.PreserveAspectFit
-        mipmap: true
-        visible: nameRegistrationState === UsernameLineEdit.NameRegistrationState.SEARCHING
-    }
-
     onNameRegistrationStateChanged: {
-        if (!enabled)
+        if (readOnly || !enabled)
             borderColor = "transparent"
 
         switch(nameRegistrationState){
-        case UsernameLineEdit.NameRegistrationState.SEARCHING:
-            __iconSource = JamiResources.jami_rolling_spinner_gif
-            borderColor = JamiTheme.greyBorderColor
-            break
         case UsernameLineEdit.NameRegistrationState.BLANK:
-            __iconSource = ""
-            borderColor = JamiTheme.greyBorderColor
+            firstIco=""
+            borderColor = "transparent"
+            error = false
+            validated = false
             break
         case UsernameLineEdit.NameRegistrationState.FREE:
-            __iconSource = JamiResources.round_check_circle_24dp_svg
-            borderColor = "green"
+            firstIco = JamiResources.circled_green_check_svg
+            borderColor = validatedColor
+            firstIcoColor = "transparent"
+            validated = true
+            error = false
+
             break
         case UsernameLineEdit.NameRegistrationState.INVALID:
         case UsernameLineEdit.NameRegistrationState.TAKEN:
-            __iconSource = JamiResources.round_error_24dp_svg
-            borderColor = "red"
+            firstIco = JamiResources.circled_red_cross_svg
+            borderColor = errorColor
+            firstIcoColor = "transparent"
+            error = true
+            validated = false
             break
         }
     }

src/app/constant/JamiStrings.qml

@@ -204,9 +204,9 @@ Item {
 
     // BackupKeyPage
     property string  backupAccountInfos: qsTr("Your account only exists on this device. " +
-                                            "If you lose your device or uninstall the application, " +
-                                            "your account will be deleted and can not be recovered. " +
-                                            "You can backup your account now or later.")
+                                              "If you lose your device or uninstall the application, " +
+                                              "your account will be deleted and can not be recovered. " +
+                                              "You can backup your account now or later.")
     property string backupAccountHere: qsTr("Backup account here")
     property string backupAccount: qsTr("Backup your account!")
     property string backupAccountBtn: qsTr("Backup account")
@@ -304,10 +304,10 @@ Item {
     property string typeIndicatorAnd: qsTr(" and ")
 
     // ConnectToAccountManager
-    property string enterJAMSURL: qsTr("Enter Jami Account Management Server (JAMS) URL")
+    property string enterJAMSURL: qsTr("Enter the Jami Account Management Server (JAMS) URL")
     property string required: qsTr("Required")
     property string jamiManagementServerURL: qsTr("Jami Account Management Server URL")
-    property string jamsCredentials: qsTr("Enter your JAMS credentials")
+    property string jamsCredentials: qsTr("Enter JAMS credentials")
     property string connect: qsTr("Connect")
     property string creatingAccount: qsTr("Creating account…")
     property string backToWelcome: qsTr("Back to welcome page")
@@ -315,6 +315,9 @@ Item {
     // CreateAccountPage
     property string chooseName: qsTr("Choose name")
     property string chooseUsername: qsTr("Choose username")
+    property string chooseAUsername: qsTr("Choose a username")
+    property string chooseIdentifier: qsTr("Choose an identifier")
+    property string identifierNotAvailable: qsTr("The identifier is not available")
     property string createPassword: qsTr("Encrypt account with password")
     property string createAccount: qsTr("Create account")
     property string confirmPassword: qsTr("Confirm password")
@@ -323,17 +326,33 @@ Item {
     property string chooseUsernameForAccount: qsTr("You can choose a username to be easily found and reached on Jami.")
     property string chooseUsernameForRV: qsTr("Choose a name for your rendezvous point")
     property string chooseAName: qsTr("Choose a name")
-    property string chooseYourUserName: qsTr("Choose your username")
+    property string chooseYourUserName: qsTr("Choose username")
     property string invalidName: qsTr("Invalid name")
     property string invalidUsername: qsTr("Invalid username")
     property string nameAlreadyTaken: qsTr("Name already taken")
     property string usernameAlreadyTaken: qsTr("Username already taken")
+    property string joinJamiNoPassword: qsTr("Are you sure that you want to join Jami without a username?\nIf yes, only a randomly generated 40-character identifier will be assigned to this account.")
+    property string usernameToolTip: qsTr("- 32 characters maximum\n- Alphabetical characters (A to Z)\n- Numeric characters (0 to 9)\n- Special character autorized: dash (-)")
+
+    // Good to know
+
+    property string goodToKnow: qsTr("Good to know")
+    property string local: qsTr("Local")
+    property string encrypt: qsTr("Encrypt")
+    property string localAccount: qsTr("This account is created locally")
+    property string usernameRecommened: qsTr("Choose a username is recommended and it can’t be changed")
+    property string passwordOptional: qsTr("Encrypt your account with a password is optional and it can’t be recovered")
+    property string customizeOptional: qsTr("The picture and the nickname are optional and can be changed in the settings")
+
 
     // CreateSIPAccountPage
+    property string sipAccount: qsTr("SIP account")
     property string proxy: qsTr("Proxy")
     property string server: qsTr("Server")
     property string createSIPAccount: qsTr("Create SIP account")
     property string configureExistingSIP: qsTr("Configure an existing SIP account")
+    property string personalizeAccount: qsTr("Personalize account")
+    property string addSip: qsTr("Add SIP account")
 
     // CurrentAccountSettings && AdvancedSettings
     property string backupSuccessful: qsTr("Backup successful")
@@ -344,13 +363,20 @@ Item {
     property string setPasswordFailed: qsTr("Password set failed")
     property string changePassword: qsTr("Change password")
     property string setPassword: qsTr("Set password")
-    property string setAPassword: qsTr("Set password")
+    property string setAPassword: qsTr("Set a password")
     property string changeCurrentPassword: qsTr("Change current password")
     property string tipBackupAccount: qsTr("Backup account to a .gz file")
     property string tipAdvancedSettingsDisplay: qsTr("Display advanced settings")
     property string tipAdvancedSettingsHide: qsTr("Hide advanced settings")
     property string enableAccount: qsTr("Enable account")
-    property string advancedAccountSettings: qsTr("Advanced Account Settings")
+    property string advancedAccountSettings: qsTr("Advanced account settings")
+    property string encryptAccount: qsTr("Encrypt account with password")
+    property string customizeProfile: qsTr("Customize profile")
+    property string customizeProfileDescription: qsTr("This profile is only shared with this account's contacts.\nThe profile can be changed at all time in the account's settings.")
+    property string encryptTitle: qsTr("Encrypt your account with a password")
+    property string encryptDescription: qsTr("A Jami account is registered only on this device as an archive containing the keys of your account. Access to this archive can be protected by a password.")
+    property string encryptWarning: qsTr("Please note that if you loose your password it cannot be recovered!")
+    property string enterNickname: qsTr("Enter a nickname, surname...")
 
     // NameRegistrationDialog
     property string setUsername: qsTr("Set username")
@@ -504,18 +530,32 @@ Item {
     property string connectFromBackup: qsTr("Restore an account from backup")
     property string generatingAccount: qsTr("Generating account…")
     property string importFromBackup: qsTr("Import from backup")
+    property string importFromArchiveBackup: qsTr("Import from archive backup")
+    property string importFromArchiveBackupDescription: qsTr("Import a Jami account from an archive file on this device.")
+    property string selectArchiveFile: qsTr("Select archive file")
 
     // ImportFromDevicePage
     property string mainAccountPassword: qsTr("Enter Jami account password")
     property string enterPIN: qsTr("Enter the PIN from another configured Jami account. " +
-                                "Use the \"Link Another Device\" feature to obtain a PIN.")
+                                   "Use the \"Link Another Device\" feature to obtain a PIN.")
     property string connectFromAnotherDevice: qsTr("Link device")
+    property string importButton: qsTr("Import")
     property string pin: qsTr("PIN")
+    property string importFromDeviceDescription: qsTr("A PIN is required to use an existing Jami account on this device.")
+    property string importStep1: qsTr("Step 1")
+    property string importStep2: qsTr("Step 2")
+    property string importStep3: qsTr("Step 3")
+    property string importStep4: qsTr("Step 4")
+    property string importStep1Desc: qsTr("Go to the Account Settings of a previous device")
+    property string importStep2Desc: qsTr("Choose the account to link")
+    property string importStep3Desc: qsTr("Select “Link another device”")
+    property string importStep4Desc: qsTr("The PIN code will be available for 10 minutes.")
+
 
     // LinkDevicesDialog
     property string pinTimerInfos: qsTr("The PIN and the account password should be entered in your device within 10 minutes.")
     property string close: qsTr("Close")
-    property string enterAccountPassword: qsTr("Enter your account password")
+    property string enterAccountPassword: qsTr("Enter account's password")
     property string addDevice: qsTr("Add Device")
 
     // PasswordDialog
@@ -592,7 +632,7 @@ Item {
     // WelcomePage
     property string shareInvite: qsTr("This is your Jami username.\nCopy and share it with your friends!")
     property string linkFromAnotherDevice: qsTr("Link this device to an existing account")
-    property string importAccountFromOtherDevice: qsTr("Import from another device")
+    property string importAccountFromAnotherDevice: qsTr("Import from another device")
     property string importAccountFromBackup: qsTr("Import from an archive backup")
     property string advancedFeatures: qsTr("Advanced features")
     property string showAdvancedFeatures: qsTr("Show advanced features")
@@ -612,6 +652,9 @@ Item {
     property string alreadyHaveAccount: qsTr("I already have an account")
     property string useExistingAccount: qsTr("Use existing Jami account")
     property string recommendationMessage: qsTr("Here are some recommendations to improve your experience on Jami")
+    property string noRecommendations: qsTr("Never show recommendations again")
+    property string welcomeToJami: qsTr("Welcome to Jami")
+    property string identifierDescription: qsTr("Share this Jami identifier to be contacted on this account!")
 
     // SmartList
     property string clearText: qsTr("Clear Text")
@@ -627,6 +670,7 @@ Item {
 
     // Generic dialog options
     property string optionOk: qsTr("Ok")
+    property string optionSave: qsTr("Save")
     property string optionCancel: qsTr("Cancel")
     property string optionUpgrade: qsTr("Upgrade")
     property string optionLater: qsTr("Later")
@@ -701,4 +745,11 @@ Item {
     property string invited: qsTr("Invited")
     property string removeMember: qsTr("Remove member")
     property string to: qsTr("To:")
+
+    //TipBox
+    property string customize: qsTr("Customize")
+    property string tips: qsTr("Tips")
+    property string customizeText: qsTr("Add a picture and a nickname to complete your profile")
+    property string customizationDescription: qsTr("This profile is only shared with this account’s contacts")
+
 }

src/app/constant/JamiTheme.qml

@@ -74,6 +74,7 @@ Item {
     property color tabbarBorderColor: darkTheme ? blackColor : "#e3e3e3"
     property color popupOverlayColor: darkTheme ? Qt.rgba(255, 255, 255, 0.22) :
                                                   Qt.rgba(0, 0, 0, 0.33)
+    property real formsRadius: 30
 
     // Side panel
     property color presenceGreen: "#4cd964"
@@ -117,17 +118,25 @@ Item {
     property color whiteColorTransparent: rgba256(255, 255, 255, 50)
     property color raiseHandColor: rgba256(0, 184, 255, 77)
 
-
+    property color secAndTertiTextColor: darkTheme ? buttonTintedBlueHovered : buttonTintedBlue
+    property color secondaryButtonBorderColor: Qt.rgba(0,0.34,0.6,0.36)
+    property color secAndTertiHoveredBackgroundColor: Qt.rgba(0,0.34,0.6,0.1)
 
     property color closeButtonLighterBlack: "#4c4c4c"
 
     // Jami switch
-    property color switchBackgroundColor: darkTheme ? "#373737" : "#9f9f9f"
     property color switchBackgroundCheckedColor: "#8dbaea"
+    property color switchBackgroundColor: darkTheme ? "#373737" : Qt.rgba(0, 0.34, 0.6, 0.16)
     property color switchHandleColor: darkTheme ? Qt.darker(lightGrey_, 2) : whiteColor
-    property color switchHandleCheckedColor: "#1b76d1"
-    property color switchHandleBorderColor: darkTheme ? whiteColor : Qt.darker(lightGrey_, 2)
-    property color switchHandleCheckedBorderColor: Qt.darker(lightGrey_, 3)
+    property color switchHandleCheckedColor: "#005699"
+    property color switchHandleBorderColor: darkTheme ? whiteColor : "#005699"
+    property color switchHandleCheckedBorderColor: darkTheme ? "#0071c9" : "#005699"
+
+    //Combobox
+    property color comboBoxBackgroundColor: darkTheme ? editBackgroundColor : selectedColor
+    property color comboboxBorderColorActive: darkTheme? "#03B9E9" : tintedBlue
+    property color comboboxBorderColor: darkTheme ? tintedBlue : Qt.rgba(0, 0.34, 0.6, 0.36)
+    property color comboboxTextColorHovered: darkTheme ? "#03B9E9" : tintedBlue
 
     // Call buttons
     property color acceptButtonGreen: "#4caf50"
@@ -161,9 +170,6 @@ Item {
     property color screenSelectionBorderColor: raiseHandColor
     property color separationLine: darkTheme ? selectedColor : backgroundColor
 
-    // Plugin Preferences View
-    property color comboBoxBackgroundColor: darkTheme ? editBackgroundColor : selectedColor
-
     // ParticipantCallInStatusView
     property color participantCallInStatusTextColor: whiteColor
 
@@ -187,7 +193,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" : Qt.rgba(0, 0, 0, 0.2)
+    property color placeholderTextColor: darkTheme ? "#7a7a7a" : "black" //Qt.rgba(0, 0, 0, 0.2)
     property color placeholderTextColorWhite: "#cccccc"
     property color inviteHoverColor: darkTheme ? blackColor : whiteColor
     property color chatviewButtonColor: darkTheme ? whiteColor : blackColor
@@ -243,10 +249,12 @@ Item {
     property real bigFontSize: calcSize(22)
     property real settingsFontSize: calcSize(11 + fontSizeOffset)
     property real buttonFontSize: calcSize(9)
+    property real materialButtonPreferredHeight: calcSize(36)
     property real participantFontSize: calcSize(10)
     property real menuFontSize: calcSize(12 + fontSizeOffset)
     property real headerFontSize: calcSize(13 + fontSizeOffset)
     property real titleFontSize: calcSize(16 + fontSizeOffset)
+    property real title2FontSize: calcSize(15 + fontSizeOffset)
     property real tinyCreditsTextSize: calcSize(13 + fontSizeOffset)
     property real creditsTextSize: calcSize(15 + fontSizeOffset)
     property real primaryRadius: calcSize(4)
@@ -310,13 +318,17 @@ Item {
     property real lineEditContextMenuSeparatorsHeight: 2
 
 
-
     // Jami switch
     property real switchIndicatorRadius: 30
     property real switchPreferredHeight: 25
     property real switchPreferredWidth: 48
     property real switchIndicatorPreferredWidth: 26
 
+    // Jami Identifier
+    property color mainColor: "#005699"
+    property real pushButtonSize: 22
+    property real pushButtonMargin: 10
+
     // Modal Popup
     property real modalPopupRadius: 20
 
@@ -372,17 +384,49 @@ Item {
     property real jamiIdLogoWidth: 70
     property real jamiIdLogoHeight: 24
 
+    // MainView
+    property color welcomeViewBackgroundColor: darkTheme ? lightGrey_ : secondaryBackgroundColor
+    property real welcomeRectSideMargins: 45
+    property real welcomeRectTopMargin: 90
+    property color rectColor: Qt.rgba(0,0.34,0.6,0.16)
+    property color welcomeText: darkTheme ? "#0071c9" : "#002B4A"
+    property real illustrationWidth: 212
+    property real illustrationHeight: 244
+
     // WizardView
     property real wizardViewPageLayoutSpacing: 12
     property real wizardViewPageBackButtonMargins: 20
     property real wizardViewPageBackButtonSize: 35
+    property real wizardViewTitleFontPixelSize: calcSize(26)
+    property real wizardViewDescriptionFontPixelSize: calcSize(15)
+    property real wizardViewLayoutTopMargin: 38
 
     // WizardView Welcome Page
     property real welcomeLabelPointSize: 30
-    property real welcomeLogoWidth: 330
-    property real welcomeLogoHeight: 110
+    property real welcomeLogoWidth: 75
+    property real welcomeLogoHeight: 70
     property real wizardButtonWidth: 400
 
+    // WizardView Advanced Account Settings
+    property color lightBlue_: "#e5eef5"
+    property color shadowColorBlue: Qt.rgba(0, 0.34,0.6,0.16)
+    property real passwordEditOpenedBoxWidth: 425
+    property real passwordEditClosedBoxWidth: 330
+    property real passwordEditOpenedBoxHeight: 380
+    property real passwordEditClosedBoxHeight: 65
+    property real customNicknameOpenedBoxWidth: 412
+    property real customNicknameClosedBoxWidth: 230
+    property real customNicknameOpenedBoxHeight: 320
+    property real customNicknameClosedBoxHeight: 65
+
+    property real cornerIconSize: 40
+
+
+    //InfoBox
+    property real infoBoxTitleFontSize: calcSize(13)
+    property real infoBoxDescFontSize: calcSize(12)
+
+
     // MaterialLineEdit
     property real materialLineEditPointSize: calcSize(10 + fontSizeOffset)
     property real materialLineEditPadding: 16

src/app/mainview/components/AboutPopUp.qml

@@ -31,7 +31,6 @@ import "../../commoncomponents"
 BaseModalDialog {
     id: root
 
-
     popupContentMargins: 14
 
     PushButton {

src/app/mainview/components/ChatView.qml

@@ -81,7 +81,7 @@ Rectangle {
             Connections {
                 target: CurrentConversation
 
-                onUrisChanged: {
+                function onUrisChanged(uris) {
                     if (CurrentConversation.uris.length >= 8 && addMemberPanel.visible) {
                         swarmDetailsPanel.visible = false
                         addMemberPanel.visible = !addMemberPanel.visible

src/app/mainview/components/NewSwarmPage.qml

@@ -36,7 +36,7 @@ Rectangle {
     signal removeMember(string convId, string member)
 
     onVisibleChanged: {
-        UtilsAdapter.setSwarmCreationImageFromString()
+        UtilsAdapter.setTempCreationImageFromString()
     }
 
     property var members: []
@@ -112,7 +112,7 @@ Rectangle {
             Layout.alignment: Qt.AlignCenter
             darkTheme: UtilsAdapter.luma(root.color)
 
-            newConversation: true
+            newItem: true
             imageId: root.visible ? "temp" : ""
             avatarSize: 180
             buttonSize: JamiTheme.smartListAvatarSize
@@ -122,12 +122,14 @@ Rectangle {
             id: title
             Layout.alignment: Qt.AlignCenter
             Layout.topMargin: JamiTheme.preferredMarginSize
+            Layout.preferredWidth: JamiTheme.preferredFieldWidth
 
             font.pointSize: JamiTheme.titleFontSize
 
-            horizontalAlignment: editable ? Text.AlignLeft : Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
 
+            fieldLayoutWidth: 10
+
             placeholderText: JamiStrings.swarmName
             tooltipText: JamiStrings.swarmName
             backgroundColor: root.color
@@ -155,10 +157,10 @@ Rectangle {
             id: description
             Layout.alignment: Qt.AlignCenter
             Layout.topMargin: JamiTheme.preferredMarginSize
+            Layout.preferredWidth: JamiTheme.preferredFieldWidth
 
             font.pointSize: JamiTheme.menuFontSize
 
-            horizontalAlignment: editable ? Text.AlignLeft : Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
 
             placeholderText: JamiStrings.addADescription
@@ -199,7 +201,7 @@ Rectangle {
             text: JamiStrings.createTheSwarm
 
             onClicked: {
-                createSwarmClicked(title.text, description.text, UtilsAdapter.swarmCreationImage())
+                createSwarmClicked(title.text, description.text, UtilsAdapter.tempCreationImage())
             }
         }
     }

src/app/mainview/components/RecordBox.qml

@@ -291,7 +291,7 @@ Popup {
                     border.color: imageColor
 
                     source: JamiResources.fiber_manual_record_24dp_svg
-                    imageColor: UtilsAdapter.luma(JamiTheme.backgroundColor) ? "white" : JamiTheme.buttonTintedBlue
+                    imageColor: UtilsAdapter.luma(JamiTheme.backgroundColor) ? "white" : JamiTheme.redColor
 
                     onClicked: {
                         root.photo = videoProvider.captureVideoFrame(VideoDevices.getDefaultDevice())

src/app/mainview/components/SelectScreen.qml

@@ -368,7 +368,7 @@ Window {
             color: JamiTheme.buttonTintedBlack
             hoveredColor: JamiTheme.buttonTintedBlackHovered
             pressedColor: JamiTheme.buttonTintedBlackPressed
-            outlined: true
+            secondary: true
 
             text: window ? JamiStrings.shareWindow : JamiStrings.shareScreen
 
@@ -397,7 +397,7 @@ Window {
             color: JamiTheme.buttonTintedBlack
             hoveredColor: JamiTheme.buttonTintedBlackHovered
             pressedColor: JamiTheme.buttonTintedBlackPressed
-            outlined: true
+            secondary: true
 
             text: JamiStrings.optionCancel
 

src/app/mainview/components/SwarmDetailsPanel.qml

@@ -53,7 +53,7 @@ Rectangle {
 
                 Layout.alignment: Qt.AlignHCenter
 
-                newConversation: true
+                newItem: true
                 imageId: LRCInstance.selectedConvUid
                 avatarSize: JamiTheme.smartListAvatarSize
             }
@@ -62,12 +62,22 @@ Rectangle {
                 id: titleLine
 
                 Layout.alignment: Qt.AlignHCenter
+                Layout.preferredWidth: JamiTheme.preferredFieldWidth
 
                 font.pointSize: JamiTheme.titleFontSize
 
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
 
+                firstIco:  JamiResources.round_edit_24dp_svg
+                secondIco: editable ? JamiResources.close_black_24dp_svg : ""
+
+                fieldLayoutWidth: 15
+                fieldLayoutHeight: 30
+
+                fontSize: 20
+                borderColor: "transparent"
+
                 text: CurrentConversation.title
                 readOnly: !root.isAdmin
                 placeholderText: JamiStrings.swarmName
@@ -89,13 +99,15 @@ Rectangle {
                 tooltipText: JamiStrings.swarmName
                 backgroundColor: root.color
                 color: UtilsAdapter.luma(backgroundColor) ?
-                        JamiTheme.chatviewTextColorLight :
-                        JamiTheme.chatviewTextColorDark
+                           JamiTheme.chatviewTextColorLight :
+                           JamiTheme.chatviewTextColorDark
 
                 onEditingFinished: {
                     if (text !== CurrentConversation.title)
                         ConversationsAdapter.updateConversationTitle(LRCInstance.selectedConvUid, text)
                 }
+                onSecondIcoClicked: {editable = !editable}
+
             }
 
             EditableLineEdit {
@@ -108,6 +120,16 @@ Rectangle {
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
 
+                Layout.preferredWidth: JamiTheme.preferredFieldWidth
+                fieldLayoutWidth: 15
+                fieldLayoutHeight: 30
+
+                fontSize: 16
+
+                firstIco:  JamiResources.round_edit_24dp_svg
+                secondIco: editable ? JamiResources.close_black_24dp_svg : ""
+                borderColor: "transparent"
+
                 text: CurrentConversation.description
                 readOnly: !root.isAdmin
                 placeholderText: JamiStrings.addADescription
@@ -129,13 +151,15 @@ Rectangle {
                 tooltipText: JamiStrings.addADescription
                 backgroundColor: root.color
                 color: UtilsAdapter.luma(backgroundColor) ?
-                        JamiTheme.chatviewTextColorLight :
-                        JamiTheme.chatviewTextColorDark
+                           JamiTheme.chatviewTextColorLight :
+                           JamiTheme.chatviewTextColorDark
 
                 onEditingFinished: {
                     if (text !== CurrentConversation.description)
                         ConversationsAdapter.updateConversationDescription(LRCInstance.selectedConvUid, text)
                 }
+
+                onSecondIcoClicked: {editable = !editable}
             }
 
             TabBar {
@@ -157,8 +181,8 @@ Rectangle {
 
                     textColorHovered: UtilsAdapter.luma(root.color) ? JamiTheme.placeholderTextColorWhite : JamiTheme.placeholderTextColor
                     textColor: UtilsAdapter.luma(root.color) ?
-                            JamiTheme.chatviewTextColorLight :
-                            JamiTheme.chatviewTextColorDark
+                                   JamiTheme.chatviewTextColorLight :
+                                   JamiTheme.chatviewTextColorDark
 
                     down: tabBar.currentIndex === 0
                     labelText: JamiStrings.about
@@ -175,8 +199,8 @@ Rectangle {
 
                     textColorHovered: UtilsAdapter.luma(root.color) ? JamiTheme.placeholderTextColorWhite : JamiTheme.placeholderTextColor
                     textColor: UtilsAdapter.luma(root.color) ?
-                            JamiTheme.chatviewTextColorLight :
-                            JamiTheme.chatviewTextColorDark
+                                   JamiTheme.chatviewTextColorLight :
+                                   JamiTheme.chatviewTextColorDark
 
                     down: tabBar.currentIndex === 1
                     labelText: {

src/app/mainview/components/UserProfile.qml

@@ -220,7 +220,7 @@ BaseModalDialog {
                 color: JamiTheme.buttonTintedBlack
                 hoveredColor: JamiTheme.buttonTintedBlackHovered
                 pressedColor: JamiTheme.buttonTintedBlackPressed
-                outlined: true
+                secondary: true
 
                 text: JamiStrings.close
 

src/app/mainview/components/WelcomePage.qml

@@ -164,7 +164,7 @@ Rectangle {
             color: JamiTheme.buttonTintedBlack
             hoveredColor: JamiTheme.buttonTintedBlackHovered
             pressedColor: JamiTheme.buttonTintedBlackPressed
-            outlined: true
+            secondary: true
 
             text: JamiStrings.aboutJami
 

src/app/settingsview/components/AdvancedCallSettings.qml

@@ -205,7 +205,7 @@ ColumnLayout {
             color: JamiTheme.buttonTintedBlack
             hoveredColor: JamiTheme.buttonTintedBlackHovered
             pressedColor: JamiTheme.buttonTintedBlackPressed
-            outlined: true
+            secondary: true
             toolTipText: JamiStrings.addDefaultModerator
 
             iconSource: JamiResources.round_add_24dp_svg

src/app/settingsview/components/CurrentAccountSettings.qml

@@ -210,7 +210,7 @@ Rectangle {
             color: JamiTheme.buttonTintedBlack
             hoveredColor: JamiTheme.buttonTintedBlackHovered
             pressedColor: JamiTheme.buttonTintedBlackPressed
-            outlined: true
+            secondary: true
 
             toolTipText: AccountAdapter.hasPassword() ?
                              JamiStrings.changeCurrentPassword :
@@ -236,7 +236,7 @@ Rectangle {
             color: JamiTheme.buttonTintedBlack
             hoveredColor: JamiTheme.buttonTintedBlackHovered
             pressedColor: JamiTheme.buttonTintedBlackPressed
-            outlined: true
+            secondary: true
 
             toolTipText: JamiStrings.tipBackupAccount
             text: JamiStrings.backupAccountBtn

src/app/settingsview/components/DeviceItemDelegate.qml

@@ -87,7 +87,7 @@ ItemDelegate {
                 wrapMode: Text.NoWrap
                 readOnly: !editable
                 loseFocusWhenEnterPressed: true
-                backgroundColor: JamiTheme.editBackgroundColor
+                backgroundColor: JamiTheme.transparentColor
 
                 onEditingFinished: {
                     AvAdapter.setDeviceName(editDeviceName.text)

src/app/settingsview/components/JamiUserIdentity.qml

@@ -141,7 +141,7 @@ ColumnLayout {
             font.bold: CurrentAccount.registeredName !== ""
             loseFocusWhenEnterPressed: btnRegisterName.visible
 
-            onAccepted: {
+            onEditingFinished: {
                 if (btnRegisterName.visible)
                     btnRegisterName.clicked()
             }

src/app/settingsview/components/LinkDeviceDialog.qml

@@ -169,7 +169,7 @@ BaseModalDialog {
                         color: enabled? JamiTheme.buttonTintedBlack : JamiTheme.buttonTintedGrey
                         hoveredColor: JamiTheme.buttonTintedBlackHovered
                         pressedColor: JamiTheme.buttonTintedBlackPressed
-                        outlined: true
+                        secondary: true
                         enabled: false
 
                         text: JamiStrings.exportAccount
@@ -188,7 +188,7 @@ BaseModalDialog {
                         color: JamiTheme.buttonTintedBlack
                         hoveredColor: JamiTheme.buttonTintedBlackHovered
                         pressedColor: JamiTheme.buttonTintedBlackPressed
-                        outlined: true
+                        secondary: true
                         enabled: true
 
                         text: JamiStrings.optionCancel
@@ -338,7 +338,7 @@ BaseModalDialog {
                     color: enabled ? JamiTheme.buttonTintedBlack : JamiTheme.buttonTintedGrey
                     hoveredColor: JamiTheme.buttonTintedBlackHovered
                     pressedColor: JamiTheme.buttonTintedBlackPressed
-                    outlined: true
+                    secondary: true
                     enabled: true
 
                     text: JamiStrings.close

src/app/settingsview/components/LinkedDevices.qml

@@ -116,7 +116,7 @@ ColumnLayout {
         color: JamiTheme.buttonTintedBlack
         hoveredColor: JamiTheme.buttonTintedBlackHovered
         pressedColor: JamiTheme.buttonTintedBlackPressed
-        outlined: true
+        secondary: true
         toolTipText: JamiStrings.tipLinkNewDevice
 
         iconSource: JamiResources.round_add_24dp_svg

src/app/settingsview/components/LogsView.qml

@@ -147,7 +147,7 @@ Window {
                     preferredWidth: itemWidth / widthDivisor
                     preferredHeight: JamiTheme.preferredFieldHeight
 
-                    outlined: true
+                    secondary: true
                     color: JamiTheme.buttonTintedBlack
                     hoveredColor: JamiTheme.buttonTintedBlackHovered
                     pressedColor: JamiTheme.buttonTintedBlackPressed
@@ -175,7 +175,7 @@ Window {
                     hoveredColor: JamiTheme.buttonTintedBlackHovered
                     pressedColor: JamiTheme.buttonTintedBlackPressed
 
-                    outlined: true
+                    secondary: true
                     text: JamiStrings.logsViewCopy
 
                     onClicked: {
@@ -214,7 +214,7 @@ Window {
                     hoveredColor: JamiTheme.buttonTintedBlackHovered
                     pressedColor: JamiTheme.buttonTintedBlackPressed
                     text: JamiStrings.logsViewReport
-                    outlined: true
+                    secondary: true
 
                     onClicked: Qt.openUrlExternally(
                                    "https://jami.net/bugs-and-improvements/")

src/app/settingsview/components/NameRegistrationDialog.qml

@@ -157,7 +157,7 @@ BaseModalDialog {
                         color: enabled? JamiTheme.buttonTintedBlack : JamiTheme.buttonTintedGrey
                         hoveredColor: JamiTheme.buttonTintedBlackHovered
                         pressedColor: JamiTheme.buttonTintedBlackPressed
-                        outlined: true
+                        secondary: true
                         enabled: false
 
                         text: JamiStrings.register
@@ -176,7 +176,7 @@ BaseModalDialog {
                         color: JamiTheme.buttonTintedBlack
                         hoveredColor: JamiTheme.buttonTintedBlackHovered
                         pressedColor: JamiTheme.buttonTintedBlackPressed
-                        outlined: true
+                        secondary: true
 
                         text: JamiStrings.optionCancel
 
@@ -259,7 +259,7 @@ BaseModalDialog {
                     color: JamiTheme.buttonTintedBlack
                     hoveredColor: JamiTheme.buttonTintedBlackHovered
                     pressedColor: JamiTheme.buttonTintedBlackPressed
-                    outlined: true
+                    secondary: true
 
                     text: JamiStrings.close
 

src/app/settingsview/components/PluginListView.qml

@@ -81,7 +81,7 @@ Rectangle {
             color: JamiTheme.buttonTintedBlack
             hoveredColor: JamiTheme.buttonTintedBlackHovered
             pressedColor: JamiTheme.buttonTintedBlackPressed
-            outlined: true
+            secondary: true
             toolTipText: JamiStrings.addNewPlugin
 
             iconSource: JamiResources.round_add_24dp_svg

src/app/settingsview/components/PluginPreferencesListView.qml

@@ -279,7 +279,7 @@ Rectangle {
             color: JamiTheme.buttonTintedBlack
             hoveredColor: JamiTheme.buttonTintedBlackHovered
             pressedColor: JamiTheme.buttonTintedBlackPressed
-            outlined: true
+            secondary: true
 
             iconSource: JamiResources.settings_backup_restore_24dp_svg
 

src/app/settingsview/components/PluginPreferencesView.qml

@@ -167,7 +167,7 @@ Rectangle {
             color: JamiTheme.buttonTintedBlack
             hoveredColor: JamiTheme.buttonTintedBlackHovered
             pressedColor: JamiTheme.buttonTintedBlackPressed
-            outlined: true
+            secondary: true
             toolTipText: JamiStrings.pluginUninstallConfirmation.arg(pluginName)
             iconSource: JamiResources.delete_24dp_svg
 

src/app/settingsview/components/RevokeDevicePasswordDialog.qml

@@ -99,7 +99,7 @@ BaseModalDialog {
                 color: enabled? JamiTheme.buttonTintedBlack : JamiTheme.buttonTintedGrey
                 hoveredColor: JamiTheme.buttonTintedBlackHovered
                 pressedColor: JamiTheme.buttonTintedBlackPressed
-                outlined: true
+                secondary: true
                 enabled: false
 
                 text: JamiStrings.remove
@@ -121,7 +121,7 @@ BaseModalDialog {
                 color: JamiTheme.buttonTintedBlack
                 hoveredColor: JamiTheme.buttonTintedBlackHovered
                 pressedColor: JamiTheme.buttonTintedBlackPressed
-                outlined: true
+                secondary: true
                 enabled: true
 
                 text: JamiStrings.optionCancel

src/app/settingsview/components/TroubleshootSettings.qml

@@ -74,7 +74,7 @@ ColumnLayout {
             color: JamiTheme.buttonTintedBlack
             hoveredColor: JamiTheme.buttonTintedBlackHovered
             pressedColor: JamiTheme.buttonTintedBlackPressed
-            outlined: true
+            secondary: true
 
             text: JamiStrings.troubleshootButton
 

src/app/settingsview/components/UpdateSettings.qml

@@ -75,7 +75,7 @@ ColumnLayout {
         color: enabled? JamiTheme.buttonTintedBlack : JamiTheme.buttonTintedGrey
         hoveredColor: JamiTheme.buttonTintedBlackHovered
         pressedColor: JamiTheme.buttonTintedBlackPressed
-        outlined: true
+        secondary: true
 
         toolTipText: JamiStrings.checkForUpdates
         text: JamiStrings.checkForUpdates
@@ -96,7 +96,7 @@ ColumnLayout {
         color: enabled? JamiTheme.buttonTintedBlack : JamiTheme.buttonTintedGrey
         hoveredColor: JamiTheme.buttonTintedBlackHovered
         pressedColor: JamiTheme.buttonTintedBlackPressed
-        outlined: true
+        secondary: true
 
         toolTipText: JamiStrings.betaInstall
         text: JamiStrings.betaInstall

src/app/utilsadapter.cpp

@@ -488,33 +488,35 @@ UtilsAdapter::supportedLang()
 }
 
 QString
-UtilsAdapter::swarmCreationImage(const QString& imageId) const
+UtilsAdapter::tempCreationImage(const QString& imageId) const
 {
     if (imageId == "temp")
         return Utils::QByteArrayFromFile(
             QStandardPaths::writableLocation(QStandardPaths::CacheLocation) + "tmpSwarmImage");
-    return lrcInstance_->getCurrentConversationModel()->avatar(imageId);
+    if (lrcInstance_->getCurrentConversationModel())
+        return lrcInstance_->getCurrentConversationModel()->avatar(imageId);
+    return {};
 }
 
 void
-UtilsAdapter::setSwarmCreationImageFromString(const QString& image, const QString& imageId)
+UtilsAdapter::setTempCreationImageFromString(const QString& image, const QString& imageId)
 {
     // Compress the image before saving
     auto img = Utils::imageFromBase64String(image, false);
-    setSwarmCreationImageFromImage(img, imageId);
+    setTempCreationImageFromImage(img, imageId);
 }
 
 void
-UtilsAdapter::setSwarmCreationImageFromFile(const QString& path, const QString& imageId)
+UtilsAdapter::setTempCreationImageFromFile(const QString& path, const QString& imageId)
 {
     // Compress the image before saving
     auto image = Utils::QByteArrayFromFile(path);
     auto img = Utils::imageFromBase64Data(image, false);
-    setSwarmCreationImageFromImage(img, imageId);
+    setTempCreationImageFromImage(img, imageId);
 }
 
 void
-UtilsAdapter::setSwarmCreationImageFromImage(const QImage& image, const QString& imageId)
+UtilsAdapter::setTempCreationImageFromImage(const QImage& image, const QString& imageId)
 {
     // Compress the image before saving
     QByteArray ba;

src/app/utilsadapter.h

@@ -92,13 +92,13 @@ public:
     Q_INVOKABLE void monitor(const bool& continuous);
     Q_INVOKABLE void clearInteractionsCache(const QString& accountId, const QString& convUid);
     Q_INVOKABLE QVariantMap supportedLang();
-    Q_INVOKABLE QString swarmCreationImage(const QString& imageId = "temp") const;
-    Q_INVOKABLE void setSwarmCreationImageFromString(const QString& image = "",
-                                                     const QString& imageId = "temp");
-    Q_INVOKABLE void setSwarmCreationImageFromFile(const QString& path,
-                                                   const QString& imageId = "temp");
-    Q_INVOKABLE void setSwarmCreationImageFromImage(const QImage& image,
+    Q_INVOKABLE QString tempCreationImage(const QString& imageId = "temp") const;
+    Q_INVOKABLE void setTempCreationImageFromString(const QString& image = "",
                                                     const QString& imageId = "temp");
+    Q_INVOKABLE void setTempCreationImageFromFile(const QString& path,
+                                                  const QString& imageId = "temp");
+    Q_INVOKABLE void setTempCreationImageFromImage(const QImage& image,
+                                                   const QString& imageId = "temp");
 
     // For Swarm details page
     Q_INVOKABLE bool getContactPresence(const QString& accountId, const QString& uri);

src/app/wizardview/WizardView.qml

@@ -77,6 +77,7 @@ Rectangle {
             objectName: "controlPanelStackView"
 
             function setPage(obj) {
+                wizardViewScrollView.vScrollBar.position = 0
                 for (var i in this.children) {
                     if (this.children[i] === obj) {
                         currentIndex = i
@@ -95,11 +96,6 @@ Rectangle {
                 objectName: "welcomePage"
 
                 onShowThisPage: controlPanelStackView.setPage(this)
-
-                onScrollToBottom: {
-                    if (welcomePage.preferredHeight > root.height)
-                        wizardViewScrollView.vScrollBar.position = 1
-                }
             }
 
             CreateAccountPage {

src/app/wizardview/components/AdvancedAccountSettings.qml

@@ -0,0 +1,550 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ * Author: Fadi Shehadeh <fadi.shehadeh@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+import net.jami.Models 1.1
+import net.jami.Adapters 1.1
+import net.jami.Constants 1.1
+import Qt5Compat.GraphicalEffects
+
+import "../../commoncomponents"
+
+Rectangle {
+
+    id: root
+    signal saveButtonClicked
+
+    property bool openedPassword: false
+    property bool openedNickname: false
+    property string validatedPassword: ""
+    property string alias: ""
+
+    color: JamiTheme.secondaryBackgroundColor
+    opacity: 0.93
+
+    function clear() {
+        openedPassword = false
+        openedNickname = false
+        displayNameLineEdit.text = ""
+        passwordEdit.text = ""
+        passwordConfirmEdit.text = ""
+        UtilsAdapter.setTempCreationImageFromString()
+    }
+
+
+    JamiFlickable {
+        id: scrollView
+
+        MouseArea {
+            anchors.fill: parent
+
+            onClicked: {
+                openedPassword = false
+                openedNickname = false
+            }
+        }
+
+        property ScrollBar vScrollBar: ScrollBar.vertical
+
+        anchors.fill: parent
+
+        contentHeight: settings.implicitHeight + 2 * JamiTheme.preferredMarginSize
+
+        ColumnLayout {
+            id: settings
+            width: Math.min(500, root.width - 2 * JamiTheme.preferredMarginSize)
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            Label {
+                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+                Layout.margins: 50
+                text: JamiStrings.advancedAccountSettings
+                color: JamiTheme.textColor
+                font.pixelSize: 22
+            }
+
+            ColumnLayout {
+                spacing: 30
+                Layout.preferredWidth: parent.width
+                Layout.preferredHeight: implicitHeight
+                Layout.alignment: Qt.AlignCenter
+
+                Item {
+
+                    Layout.alignment: Qt.AlignTop
+
+                    Layout.preferredWidth: {
+                        if (root.openedPassword)
+                            return Math.min(settings.width, JamiTheme.passwordEditOpenedBoxWidth)
+                        if (root.openedNickname)
+                            return Math.min(settings.width, cornerIcon1.width)
+                        return Math.min(settings.width, JamiTheme.passwordEditClosedBoxWidth)
+                    }
+
+                    Layout.preferredHeight: {
+                        if (root.openedPassword)
+                            return passwordColumnLayout.implicitHeight
+                        return Math.max(cornerIcon1.height, labelEncrypt.height)
+                    }
+
+
+                    Behavior on Layout.preferredWidth {
+                        NumberAnimation { duration: 100 }
+                    }
+                    Behavior on Layout.preferredHeight {
+                        NumberAnimation { duration: 100 }
+                    }
+
+                    DropShadow {
+                        z: -1
+                        anchors.fill: parent
+                        horizontalOffset: 3.0
+                        verticalOffset: 3.0
+                        radius: 16
+                        source: bg
+                        color: Qt.rgba(0, 0.34,0.6,0.16)
+                    }
+
+                    Rectangle {
+                        id: bg
+                        radius: JamiTheme.formsRadius
+                        border.color: JamiTheme.lightBlue_
+                        layer.enabled: true
+                        color: JamiTheme.secondaryBackgroundColor
+                        anchors.fill: parent
+
+                        Rectangle {
+
+                            layer.enabled: true
+                            height: parent.height /2
+                            width: parent.width /2
+                            anchors.bottom: parent.bottom
+                            anchors.left: parent.left
+                            border.color: JamiTheme.lightBlue_
+                            color: JamiTheme.secondaryBackgroundColor
+
+                            Rectangle {
+
+                                height:  parent.height +1
+                                width: parent.width +1
+                                anchors.bottom: parent.bottom
+                                anchors.left: parent.left
+                                anchors.margins: 1
+                                border.color: JamiTheme.secondaryBackgroundColor
+                                color: JamiTheme.secondaryBackgroundColor
+
+                            }
+                        }
+
+                        ColumnLayout {
+                            id: passwordColumnLayout
+                            anchors.fill: parent
+
+                            Text {
+                                visible: openedPassword
+                                elide: Text.ElideRight
+
+                                text: JamiStrings.encryptAccount
+                                font.pixelSize: JamiTheme.creditsTextSize
+                                Layout.fillWidth: true
+                                Layout.leftMargin: 35
+                                Layout.topMargin: 25
+                                color: JamiTheme.textColor
+
+                            }
+
+                            Text {
+
+                                visible: openedPassword
+                                Layout.topMargin: 12
+                                Layout.leftMargin: 35
+
+                                Layout.preferredWidth: 360
+                                Layout.alignment: Qt.AlignLeft
+                                color: JamiTheme.textColor
+                                wrapMode: Text.WordWrap
+
+                                text: JamiStrings.encryptDescription
+                                font.pixelSize: JamiTheme.headerFontSize
+                            }
+
+                            EditableLineEdit {
+
+                                id: passwordEdit
+
+                                visible: openedPassword
+                                Layout.alignment: Qt.AlignCenter
+                                Layout.preferredWidth: 325
+
+
+                                echoMode: TextInput.Password
+
+                                placeholderText: JamiStrings.password
+                                secondIco: JamiResources.eye_cross_svg
+                                onSecondIcoClicked: { toggleEchoMode() }
+                            }
+
+                            EditableLineEdit {
+
+                                id: passwordConfirmEdit
+                                visible: openedPassword
+
+                                Layout.alignment: Qt.AlignCenter
+                                Layout.preferredWidth: 325
+
+
+                                echoMode: TextInput.Password
+
+                                placeholderText: JamiStrings.confirmPassword
+                                secondIco: JamiResources.eye_cross_svg
+                                onSecondIcoClicked: { toggleEchoMode() }
+
+                            }
+
+                            MaterialButton {
+
+                                visible: openedPassword
+
+                                Layout.topMargin: 10
+                                Layout.alignment: Qt.AlignCenter
+                                preferredWidth: JamiTheme.wizardButtonWidth / 2
+                                text: JamiStrings.setPassword
+                                primary: true
+
+                                hoveredColor: checkEnable() ? JamiTheme.buttonTintedBlueHovered : JamiTheme.buttonTintedGreyInactive
+                                pressedColor: checkEnable() ? JamiTheme.buttonTintedBluePressed : JamiTheme.buttonTintedGreyInactive
+
+                                color: checkEnable() ? JamiTheme.buttonTintedBlue :
+                                                    JamiTheme.buttonTintedGreyInactive
+
+                                enabled: checkEnable()
+
+                                function checkEnable() {
+                                    text = JamiStrings.setPassword
+                                    return (passwordEdit.text === passwordConfirmEdit.text
+                                            && passwordEdit.text.length !== 0)
+                                }
+
+                                onClicked: {
+                                    root.validatedPassword = passwordConfirmEdit.text
+                                    text = JamiStrings.setPasswordSuccess
+                                }
+
+                            }
+
+                            Text {
+
+                                visible: openedPassword
+
+                                Layout.topMargin: 15
+                                Layout.leftMargin: 35
+
+                                Layout.preferredWidth: 360
+                                Layout.alignment: Qt.AlignCenter
+                                color: JamiTheme.textColor
+                                wrapMode: Text.WordWrap
+
+                                text: JamiStrings.encryptWarning
+                                font.pixelSize: JamiTheme.headerFontSize
+                            }
+
+                            RowLayout {
+
+                                Layout.alignment: Qt.AlignLeft
+                                Layout.preferredWidth: parent.width
+
+                                Rectangle {
+
+                                    id: cornerIcon1
+                                    layer.enabled: true
+
+                                    radius: JamiTheme.formsRadius
+                                    height: JamiTheme.cornerIconSize
+                                    width: JamiTheme.cornerIconSize
+
+                                    color: openedPassword  ? JamiTheme.lightBlue_ : JamiTheme.transparentColor
+                                    Layout.alignment: Qt.AlignBottom | Qt.AlignLeft
+                                    Layout.leftMargin:  openedPassword ? 2 : openedNickname ? 0 : 20
+                                    Layout.bottomMargin: openedPassword ? 1 : 0
+
+                                    Rectangle {
+
+                                        visible: openedPassword
+
+                                        height: cornerIcon1.height/2
+                                        width: cornerIcon1.width/2
+                                        anchors.left: cornerIcon1.left
+                                        anchors.bottom: cornerIcon1.bottom
+                                        color: JamiTheme.lightBlue_
+
+                                    }
+
+                                    ResponsiveImage  {
+
+                                        width: 18
+                                        height: 18
+                                        source: JamiResources.lock_svg
+                                        color: JamiTheme.tintedBlue
+                                        anchors.centerIn: cornerIcon1
+                                    }
+                                }
+
+                                Text {
+                                    id: labelEncrypt
+                                    visible: !openedPassword && !openedNickname
+                                    Layout.fillWidth: true
+
+                                    text: JamiStrings.encryptAccount
+                                    elide: Text.ElideRight
+                                    color: JamiTheme.textColor
+                                    font.pixelSize: JamiTheme.creditsTextSize
+
+                                }
+                            }
+                        }
+
+                        TapHandler {
+                            target: passwordColumnLayout
+                            onTapped: {
+                                openedNickname = false
+                                openedPassword = true
+                            }
+                        }
+                    }
+                }
+
+
+                Item {
+                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
+
+                    Behavior on Layout.preferredWidth {
+                        NumberAnimation { duration: 100 }
+                    }
+
+                    Behavior on Layout.preferredHeight {
+                        NumberAnimation { duration: 100 }
+                    }
+
+                    Layout.preferredWidth: {
+                        if (openedNickname)
+                            return Math.min(settings.width, JamiTheme.customNicknameOpenedBoxWidth)
+                        if (openedPassword)
+                            return Math.min(settings.width, cornerIcon1.width)
+                        return Math.min(settings.width, JamiTheme.customNicknameClosedBoxWidth)
+                    }
+
+                    Layout.preferredHeight: {
+                        if (openedNickname)
+                            return customColumnLayout.implicitHeight
+                        return Math.max(cornerIcon2.height, labelCustomize.height)
+                    }
+
+                    DropShadow {
+                        z: -1
+                        anchors.fill: parent
+                        horizontalOffset: 3.0
+                        verticalOffset: 3.0
+                        radius: 16
+                        source: bg2
+                        color: Qt.rgba(0, 0.34,0.6,0.16)
+                    }
+
+                    Rectangle {
+                        id: bg2
+
+                        radius: JamiTheme.formsRadius
+                        border.color: JamiTheme.lightBlue_
+                        layer.enabled: true
+                        color: JamiTheme.secondaryBackgroundColor
+                        anchors.fill: parent
+
+                        Rectangle {
+
+                            height: parent.height /2
+                            width: parent.width /2
+                            anchors.bottom: parent.bottom
+                            anchors.right: parent.right
+                            border.color: JamiTheme.lightBlue_
+                            color: JamiTheme.secondaryBackgroundColor
+                            layer.enabled: true
+
+                            Rectangle {
+
+                                height: parent.height +1
+                                width: parent.width +1
+                                opacity: 1
+                                anchors.bottom: parent.bottom
+                                anchors.right: parent.right
+                                anchors.margins: 1
+                                border.color: JamiTheme.secondaryBackgroundColor
+                                color: JamiTheme.secondaryBackgroundColor
+
+                            }
+
+                        }
+
+                        ColumnLayout {
+
+                            id: customColumnLayout
+                            anchors.fill: parent
+
+                            Text {
+
+                                visible: openedNickname
+                                text: JamiStrings.customizeProfile
+                                elide: Text.ElideRight
+                                Layout.topMargin: 25
+                                Layout.leftMargin: 35
+                                font.pixelSize: JamiTheme.creditsTextSize
+                                color: JamiTheme.textColor
+                                Layout.fillWidth: true
+                            }
+
+                            PhotoboothView {
+
+                                id: currentAccountAvatar
+                                darkTheme: UtilsAdapter.luma(JamiTheme.primaryBackgroundColor)
+                                visible: openedNickname
+
+                                Layout.alignment: Qt.AlignCenter
+                                Layout.topMargin: 10
+
+                                newItem: true
+                                imageId: visible? "temp" : ""
+                                avatarSize: 80
+                                buttonSize: JamiTheme.smartListAvatarSize
+
+                            }
+
+                            EditableLineEdit {
+
+                                id: displayNameLineEdit
+
+                                visible: openedNickname
+
+                                Layout.alignment: Qt.AlignCenter
+                                Layout.preferredWidth: 280
+
+                                placeholderText: JamiStrings.enterNickname
+
+                                onEditingFinished: root.alias = text
+
+                            }
+
+                            Text {
+
+                                visible: openedNickname
+
+                                Layout.topMargin: 20
+
+                                Layout.preferredWidth: 360
+                                Layout.alignment: Qt.AlignCenter
+                                wrapMode: Text.WordWrap
+                                color: JamiTheme.textColor
+
+                                text: JamiStrings.customizeProfileDescription
+                                font.pixelSize: JamiTheme.headerFontSize
+                            }
+
+                            RowLayout{
+
+                                Layout.alignment: openedNickname ? Qt.AlignRight : Qt.AlignLeft
+                                Layout.fillWidth: true
+
+                                Rectangle {
+
+                                    id: cornerIcon2
+                                    layer.enabled: true
+
+                                    radius: JamiTheme.formsRadius
+                                    height: JamiTheme.cornerIconSize
+                                    width: JamiTheme.cornerIconSize
+
+                                    color: openedNickname  ? JamiTheme.lightBlue_ : JamiTheme.transparentColor
+                                    Layout.alignment: Qt.AlignBottom | Qt.AlignRight
+                                    Layout.leftMargin: openedPassword ? 0 : 20
+                                    Layout.rightMargin:  openedNickname? 2 : 0
+                                    Layout.bottomMargin: openedNickname ? 2 : 0
+
+                                    Rectangle {
+                                        visible: openedNickname
+
+                                        height: cornerIcon2.height/2
+                                        width: cornerIcon2.width/2
+                                        anchors.right: cornerIcon2.right
+                                        anchors.bottom: cornerIcon2.bottom
+                                        color: JamiTheme.lightBlue_
+                                    }
+
+                                    ResponsiveImage  {
+
+                                        width: 18
+                                        height: 18
+                                        source: JamiResources.noun_paint_svg
+                                        color: JamiTheme.tintedBlue
+                                        anchors.centerIn: cornerIcon2
+                                    }
+                                }
+
+                                Text {
+                                    id: labelCustomize
+                                    visible: !openedNickname && !openedPassword
+
+                                    color: JamiTheme.textColor
+                                    text: JamiStrings.customizeProfile
+                                    font.pixelSize: JamiTheme.creditsTextSize
+                                    Layout.fillWidth: true
+                                    elide: Text.ElideRight
+
+                                }
+                            }
+                        }
+
+                        TapHandler {
+                            target: customColumnLayout
+                            onTapped: {
+                                openedNickname = true
+                                openedPassword = false
+                            }
+                        }
+                    }
+                }
+
+                MaterialButton {
+                    id: showAdvancedButton
+
+                    tertiary: true
+                    secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+
+                    Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                    Layout.bottomMargin: JamiTheme.wizardViewPageBackButtonMargins
+
+                    preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
+                    text: JamiStrings.optionSave
+
+                    onClicked: root.saveButtonClicked()
+                }
+            }
+
+        }
+    }
+
+}

src/app/wizardview/components/BackupKeyPage.qml

@@ -223,7 +223,7 @@ Rectangle {
             color: JamiTheme.buttonTintedGrey
             hoveredColor: JamiTheme.buttonTintedGreyHovered
             pressedColor: JamiTheme.buttonTintedGreyPressed
-            outlined: true
+            secondary: true
 
             KeyNavigation.tab: neverShowMeAgainSwitch
             KeyNavigation.up: backupBtn

src/app/wizardview/components/ConnectToAccountManagerPage.qml

@@ -29,7 +29,7 @@ import "../../commoncomponents"
 Rectangle {
     id: root
 
-    property int preferredHeight: connectToAccountManagerPageColumnLayout.implicitHeight
+    property int preferredHeight: connectToAccountManagerPageColumnLayout.implicitHeight + 2 * JamiTheme.preferredMarginSize
     property string errorText: ""
 
     signal showThisPage
@@ -60,7 +60,7 @@ Rectangle {
         }
     }
 
-    color: JamiTheme.backgroundColor
+    color: JamiTheme.secondaryBackgroundColor
 
     ColumnLayout {
         id: connectToAccountManagerPageColumnLayout
@@ -68,55 +68,62 @@ Rectangle {
         spacing: JamiTheme.wizardViewPageLayoutSpacing
 
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.verticalCenter: parent.verticalCenter
+        anchors.top: parent.top
+        anchors.topMargin: JamiTheme.wizardViewLayoutTopMargin
 
-        RowLayout {
-            spacing: JamiTheme.wizardViewPageLayoutSpacing
+        width: Math.max(508, root.width - 100)
 
+        Text {
+
+            text: JamiStrings.connectJAMSServer
             Layout.alignment: Qt.AlignCenter
-            Layout.topMargin: JamiTheme.wizardViewPageBackButtonMargins
-            Layout.preferredWidth: implicitWidth
+            Layout.topMargin: 15
+            Layout.preferredWidth: Math.min(360, root.width - JamiTheme.preferredMarginSize * 2)
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: JamiTheme.textColor
 
-            Label {
-                text: JamiStrings.enterJAMSURL
-                color: JamiTheme.textColor
-                font.pointSize: JamiTheme.textFontSize + 3
-            }
+            font.pixelSize: JamiTheme.wizardViewTitleFontPixelSize
+            wrapMode : Text.WordWrap
 
-            BubbleLabel {
-                Layout.alignment: Qt.AlignRight
-
-                text: JamiStrings.required
-                textColor: JamiTheme.requiredFieldColor
-                bubbleColor: JamiTheme.requiredFieldBackgroundColor
-            }
         }
 
-        MaterialLineEdit {
+        Text {
+
+            text: JamiStrings.enterJAMSURL
+            Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: 30
+            Layout.preferredWidth: Math.min(400, root.width - JamiTheme.preferredMarginSize * 2)
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: JamiTheme.textColor
+
+            font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
+            wrapMode : Text.WordWrap
+        }
+
+        EditableLineEdit {
             id: accountManagerEdit
 
             objectName: "accountManagerEdit"
 
-            Layout.preferredHeight: fieldLayoutHeight
-            Layout.preferredWidth: connectBtn.width
             Layout.alignment: Qt.AlignCenter
+            Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
 
+            fontSize: 15
+            Layout.topMargin: 5
             focus: visible
 
+            secondIco: JamiResources.outline_info_24dp_svg
+
             selectByMouse: true
-            placeholderText: JamiStrings.jamiManagementServerURL
+            placeholderText: JamiStrings.jamiManagementServerURL  //problem with resize
             font.pointSize: JamiTheme.textFontSize
             font.kerning: true
 
             KeyNavigation.tab: usernameManagerEdit
-            KeyNavigation.up: {
-                if (backButton.visible)
-                    return backButton
-                else if (connectBtn.enabled)
-                    return connectBtn
-                return passwordManagerEdit
-            }
-            KeyNavigation.down: KeyNavigation.tab
+            KeyNavigation.up: backButton
+            KeyNavigation.down: usernameManagerEdit
 
             onTextChanged: errorText = ""
             onAccepted: usernameManagerEdit.forceActiveFocus()
@@ -125,10 +132,16 @@ Rectangle {
         Label {
             id: credentialsLabel
 
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: connectBtn.width
-
             text: JamiStrings.jamsCredentials
+
+            Layout.alignment: Qt.AlignCenter
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            Layout.preferredWidth: Math.min(450, root.width - JamiTheme.preferredMarginSize * 2)
+            Layout.topMargin: 35
+            font.weight: Font.Medium
+            font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
+
             color: JamiTheme.textColor
             wrapMode: Text.Wrap
 
@@ -137,14 +150,18 @@ Rectangle {
                                credentialsLabel.font, credentialsLabel.text).height
         }
 
-        MaterialLineEdit {
+        EditableLineEdit {
+
             id: usernameManagerEdit
 
             objectName: "usernameManagerEdit"
 
-            Layout.preferredHeight: fieldLayoutHeight
-            Layout.preferredWidth: connectBtn.width
             Layout.alignment: Qt.AlignCenter
+            Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
+
+            fontSize: 15
+
+            secondIco: JamiResources.outline_info_24dp_svg
 
             selectByMouse: true
             placeholderText: JamiStrings.username
@@ -153,43 +170,41 @@ Rectangle {
 
             KeyNavigation.tab: passwordManagerEdit
             KeyNavigation.up: accountManagerEdit
-            KeyNavigation.down: KeyNavigation.tab
+            KeyNavigation.down: passwordManagerEdit
 
             onTextChanged: errorText = ""
-            onAccepted: passwordManagerEdit.forceActiveFocus()
+
         }
 
-        MaterialLineEdit {
+        EditableLineEdit {
+
             id: passwordManagerEdit
 
             objectName: "passwordManagerEdit"
 
-            Layout.preferredHeight: fieldLayoutHeight
-            Layout.preferredWidth: connectBtn.width
             Layout.alignment: Qt.AlignCenter
+            Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
 
             selectByMouse: true
             placeholderText: JamiStrings.password
             font.pointSize: JamiTheme.textFontSize
             font.kerning: true
+            Layout.topMargin: 10
+
+            secondIco: JamiResources.eye_cross_svg
+            thirdIco: JamiResources.outline_info_24dp_svg
+
+            fontSize: 15
 
             echoMode: TextInput.Password
 
-            KeyNavigation.tab: {
-                if (connectBtn.enabled)
-                    return connectBtn
-                else if (backButton.visible)
-                    return backButton
-                return accountManagerEdit
-            }
+            KeyNavigation.tab: connectBtn.enabled ? connectBtn : backButton
             KeyNavigation.up: usernameManagerEdit
-            KeyNavigation.down: KeyNavigation.tab
+            KeyNavigation.down: connectBtn.enabled ? connectBtn : backButton
 
             onTextChanged: errorText = ""
-            onAccepted: {
-                if (connectBtn.enabled)
-                    connectBtn.clicked()
-            }
+            onSecondIcoClicked: { toggleEchoMode() }
+
         }
 
         SpinnerButton {
@@ -198,9 +213,10 @@ Rectangle {
             objectName: "connectToAccountManagerPageConnectBtn"
 
             Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: 40
             Layout.bottomMargin: errorLabel.visible ? 0 : JamiTheme.wizardViewPageBackButtonMargins
 
-            preferredWidth: JamiTheme.wizardButtonWidth
+            preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
 
             spinnerTriggeredtext: JamiStrings.creatingAccount
             normalText: JamiStrings.connect
@@ -210,13 +226,11 @@ Rectangle {
                      && passwordManagerEdit.text.length !== 0
                      && !spinnerTriggered
 
-            KeyNavigation.tab: {
-                if (backButton.visible)
-                    return backButton
-                return accountManagerEdit
-            }
+            color: JamiTheme.tintedBlue
+
+            KeyNavigation.tab: backButton
             KeyNavigation.up: passwordManagerEdit
-            KeyNavigation.down: KeyNavigation.tab
+            KeyNavigation.down: backButton
 
             onClicked: {
                 if (connectBtn.focus)
@@ -226,8 +240,8 @@ Rectangle {
                 WizardViewStepModel.accountCreationInfo =
                         JamiQmlUtils.setUpAccountCreationInputPara(
                             {username : usernameManagerEdit.text,
-                             password : passwordManagerEdit.text,
-                             manager : accountManagerEdit.text})
+                                password : passwordManagerEdit.text,
+                                manager : accountManagerEdit.text})
                 WizardViewStepModel.nextStep()
             }
         }

src/app/wizardview/components/CreateAccountPage.qml

@@ -21,9 +21,10 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 
-import net.jami.Models 1.1
 import net.jami.Adapters 1.1
 import net.jami.Constants 1.1
+import net.jami.Models 1.1
+import Qt5Compat.GraphicalEffects
 
 import "../"
 import "../../commoncomponents"
@@ -33,11 +34,8 @@ Rectangle {
     id: root
 
     property bool isRendezVous: false
-    property int preferredHeight: {
-        if (createAccountStack.currentIndex === 0)
-            return usernameColumnLayout.implicitHeight
-        return passwordColumnLayout.implicitHeight
-    }
+    property bool helpOpened: false
+    property int preferredHeight: createAccountStack.implicitHeight
 
     signal showThisPage
 
@@ -45,16 +43,15 @@ Rectangle {
         isRendezVous = isRdv
         createAccountStack.currentIndex = 0
         clearAllTextFields()
-        passwordSwitch.checked = false
     }
 
     function clearAllTextFields() {
+        chooseUsernameButton.enabled = true
         usernameEdit.clear()
-        passwordEdit.clear()
-        passwordConfirmEdit.clear()
+        advancedAccountSettingsPage.clear()
     }
 
-    color: JamiTheme.backgroundColor
+    color: JamiTheme.secondaryBackgroundColor
 
     Connections {
         target: WizardViewStepModel
@@ -66,8 +63,6 @@ Rectangle {
                 initializeOnShowUp(WizardViewStepModel.accountCreationOption ===
                                    WizardViewStepModel.AccountCreationOption.CreateRendezVous)
                 root.showThisPage()
-            } else if (currentMainStep === WizardViewStepModel.MainSteps.SetPassword) {
-                createAccountStack.currentIndex = passwordSetupPage.stackIndex
             }
         }
     }
@@ -76,7 +71,6 @@ Rectangle {
         id: createAccountStack
 
         objectName: "createAccountStack"
-
         anchors.fill: parent
 
         Rectangle {
@@ -84,38 +78,52 @@ Rectangle {
 
             objectName: "nameRegistrationPage"
 
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
             property int stackIndex: 0
 
-            color: JamiTheme.backgroundColor
+            color: JamiTheme.secondaryBackgroundColor
 
             ColumnLayout {
                 id: usernameColumnLayout
 
                 spacing: JamiTheme.wizardViewPageLayoutSpacing
 
-                anchors.centerIn: parent
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: parent.top
+                anchors.topMargin: JamiTheme.wizardViewLayoutTopMargin
 
-                width: root.width
+                width: Math.max(508, root.width - 100)
 
-                RowLayout {
-                    spacing: JamiTheme.wizardViewPageLayoutSpacing
+                Text {
+                    id: joinJami
 
+                    text: JamiStrings.joinJami
                     Layout.alignment: Qt.AlignCenter
-                    Layout.topMargin: JamiTheme.wizardViewPageBackButtonMargins
-                    Layout.preferredWidth: usernameEdit.width
+                    Layout.topMargin: 15
+                    Layout.preferredWidth: Math.min(360, root.width - JamiTheme.preferredMarginSize * 2)
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
 
-                    Label {
-                        text: isRendezVous ? JamiStrings.chooseUsernameForRV :
-                                             JamiStrings.chooseUsernameForAccount
-                        color: JamiTheme.textColor
-                        font.pointSize: JamiTheme.textFontSize + 3
-                    }
+                    color: JamiTheme.textColor
+                    font.pixelSize: JamiTheme.wizardViewTitleFontPixelSize
+                    wrapMode : Text.WordWrap
+                }
 
-                    BubbleLabel {
-                        Layout.alignment: Qt.AlignRight
+                Text {
 
-                        text: JamiStrings.recommended
-                    }
+                    text: isRendezVous ? JamiStrings.chooseUsernameForRV :
+                                         JamiStrings.chooseUsernameForAccount
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.topMargin: 15
+                    Layout.preferredWidth: Math.min(360, root.width - JamiTheme.preferredMarginSize * 2)
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    color: JamiTheme.textColor
+
+                    font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
+                    wrapMode:Text.WordWrap
                 }
 
                 UsernameLineEdit {
@@ -124,19 +132,15 @@ Rectangle {
                     objectName: "usernameEdit"
 
                     Layout.topMargin: 15
-                    Layout.preferredHeight: fieldLayoutHeight
-                    Layout.preferredWidth:  chooseUsernameButton.width
                     Layout.alignment: Qt.AlignHCenter
+                    Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
 
                     focus: visible
+                    fontSize: 18
 
-                    KeyNavigation.tab: chooseUsernameButton.enabled ? chooseUsernameButton :
-                                                                      skipButton
+                    KeyNavigation.tab: chooseUsernameButton
                     KeyNavigation.up: backButton
-                    KeyNavigation.down: KeyNavigation.tab
-
-                    placeholderText: isRendezVous ? JamiStrings.chooseAName :
-                                                    JamiStrings.chooseYourUserName
+                    KeyNavigation.down: chooseUsernameButton
 
                     onAccepted: {
                         if (chooseUsernameButton.enabled)
@@ -149,14 +153,16 @@ Rectangle {
                 Label {
                     Layout.alignment: Qt.AlignHCenter
 
-                    visible: text.length !==0
+                    visible: text.length !==0 || usernameEdit.selected
 
                     text: {
                         switch(usernameEdit.nameRegistrationState){
                         case UsernameLineEdit.NameRegistrationState.BLANK:
+                            return " "
                         case UsernameLineEdit.NameRegistrationState.SEARCHING:
+                            return " "
                         case UsernameLineEdit.NameRegistrationState.FREE:
-                            return ""
+                            return " "
                         case UsernameLineEdit.NameRegistrationState.INVALID:
                             return isRendezVous ? JamiStrings.invalidName :
                                                   JamiStrings.invalidUsername
@@ -175,235 +181,83 @@ Rectangle {
                     objectName: "chooseUsernameButton"
 
                     Layout.alignment: Qt.AlignCenter
+                    primary: true
 
-                    preferredWidth: JamiTheme.wizardButtonWidth
+                    preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
 
                     font.capitalization: Font.AllUppercase
-                    text: isRendezVous ? JamiStrings.chooseName : JamiStrings.chooseUsername
+                    color: enabled? JamiTheme.buttonTintedBlue : JamiTheme.buttonTintedGrey
+                    text: !enabled ? JamiStrings.creatingAccount :
+                                isRendezVous ? JamiStrings.chooseName : JamiStrings.joinJami
                     enabled: usernameEdit.nameRegistrationState === UsernameLineEdit.NameRegistrationState.FREE
-                    color: usernameEdit.nameRegistrationState === UsernameLineEdit.NameRegistrationState.FREE ?
-                               JamiTheme.wizardBlueButtons :
-                               JamiTheme.buttonTintedGreyInactive
-                    hoveredColor: JamiTheme.buttonTintedBlueHovered
-                    pressedColor: JamiTheme.buttonTintedBluePressed
+                            || usernameEdit.nameRegistrationState === UsernameLineEdit.NameRegistrationState.BLANK
 
-                    KeyNavigation.tab: skipButton
+
+                    KeyNavigation.tab: showAdvancedButton
                     KeyNavigation.up: usernameEdit
-                    KeyNavigation.down: KeyNavigation.tab
-
-                    onClicked: WizardViewStepModel.nextStep()
-                }
-
-                MaterialButton {
-                    id: skipButton
-
-                    objectName: "nameRegistrationPageSkipButton"
-
-                    Layout.alignment: Qt.AlignCenter
-
-                    preferredWidth: JamiTheme.wizardButtonWidth
-
-                    text: JamiStrings.skip
-                    color: JamiTheme.buttonTintedGrey
-                    hoveredColor: JamiTheme.buttonTintedGreyHovered
-                    pressedColor: JamiTheme.buttonTintedGreyPressed
-                    outlined: true
-
-                    KeyNavigation.tab: backButton
-                    KeyNavigation.up: chooseUsernameButton.enabled ? chooseUsernameButton :
-                                                                     usernameEdit
-                    KeyNavigation.down: KeyNavigation.tab
-
-                    onClicked: {
-                        usernameEdit.clear()
-                        WizardViewStepModel.nextStep()
-                    }
-                }
-
-                AccountCreationStepIndicator {
-                    Layout.topMargin: JamiTheme.wizardViewPageBackButtonMargins
-                    Layout.bottomMargin: JamiTheme.wizardViewPageBackButtonMargins
-                    Layout.alignment: Qt.AlignHCenter
-
-                    spacing: JamiTheme.wizardViewPageLayoutSpacing
-                    steps: 2
-                    currentStep: 1
-                }
-            }
-        }
-
-        Rectangle {
-            id: passwordSetupPage
-
-            objectName: "passwordSetupPage"
-
-            property int stackIndex: 1
-
-            focus: visible
-
-            color: JamiTheme.backgroundColor
-
-            KeyNavigation.tab: passwordSwitch
-            KeyNavigation.up: passwordSwitch
-            KeyNavigation.down: passwordSwitch
-
-            ColumnLayout {
-                id: passwordColumnLayout
-
-                spacing: JamiTheme.wizardViewPageLayoutSpacing
-
-                anchors.centerIn: parent
-                width: root.width
-
-                RowLayout {
-                    spacing: JamiTheme.wizardViewPageLayoutSpacing
-
-                    Layout.alignment: Qt.AlignCenter
-                    Layout.topMargin: JamiTheme.wizardViewPageBackButtonMargins
-                    Layout.preferredWidth: usernameEdit.width
-
-                    Label {
-                        Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-                        text: JamiStrings.createPassword
-                        color: JamiTheme.textColor
-                        font.pointSize: JamiTheme.textFontSize + 3
-                    }
-
-                    JamiSwitch {
-                        id: passwordSwitch
-
-                        objectName: "passwordSwitch"
-
-                        Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-                        Layout.leftMargin: -JamiTheme.wizardViewPageLayoutSpacing
-                        Layout.topMargin: 5
-
-                        KeyNavigation.tab: checked ? passwordEdit : createAccountButton
-                        KeyNavigation.up: backButton
-                        KeyNavigation.down: KeyNavigation.tab
-                    }
-
-                    BubbleLabel {
-                        Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-
-                        text: JamiStrings.optional
-                        bubbleColor: JamiTheme.wizardBlueButtons
-                    }
-                }
-
-                MaterialLineEdit {
-                    id: passwordEdit
-
-                    objectName: "passwordEdit"
-
-                    Layout.preferredHeight: fieldLayoutHeight
-                    Layout.preferredWidth: createAccountButton.width
-                    Layout.alignment: Qt.AlignHCenter
-
-                    focus: visible
-                    visible: passwordSwitch.checked
-
-                    selectByMouse: true
-                    echoMode: TextInput.Password
-                    placeholderText: JamiStrings.password
-                    font.pointSize: JamiTheme.textFontSize
-                    font.kerning: true
-
-                    KeyNavigation.tab: passwordConfirmEdit
-                    KeyNavigation.up: passwordSwitch
-                    KeyNavigation.down: KeyNavigation.tab
-
-                    onAccepted: passwordConfirmEdit.forceActiveFocus()
-                }
-
-                MaterialLineEdit {
-                    id: passwordConfirmEdit
-
-                    objectName: "passwordConfirmEdit"
-
-                    Layout.preferredHeight: fieldLayoutHeight
-                    Layout.preferredWidth: createAccountButton.width
-                    Layout.alignment: Qt.AlignHCenter
-
-                    visible: passwordSwitch.checked
-
-                    selectByMouse: true
-                    echoMode: TextInput.Password
-                    placeholderText: JamiStrings.confirmPassword
-                    font.pointSize: JamiTheme.textFontSize
-                    font.kerning: true
-
-                    KeyNavigation.tab: createAccountButton.enabled ? createAccountButton :
-                                                                     backButton
-                    KeyNavigation.up: passwordEdit
-                    KeyNavigation.down: KeyNavigation.tab
-
-                    onAccepted: {
-                        if (createAccountButton.enabled)
-                            createAccountButton.clicked()
-                    }
-                }
-
-                Label {
-                    Layout.alignment: Qt.AlignLeft
-                    Layout.preferredWidth: createAccountButton.width - 10
-                    Layout.leftMargin: (root.width - createAccountButton.width) / 2
-
-                    text: JamiStrings.notePasswordRecovery
-                    color: JamiTheme.textColor
-                    wrapMode: Text.WordWrap
-                    font.pointSize: JamiTheme.textFontSize
-                }
-
-                MaterialButton {
-                    id: createAccountButton
-
-                    objectName: "createAccountButton"
-
-                    Layout.alignment: Qt.AlignCenter
-
-                    preferredWidth: JamiTheme.wizardButtonWidth
-
-                    function checkEnable() {
-                        return !passwordSwitch.checked ||
-                                (passwordEdit.text === passwordConfirmEdit.text
-                                 && passwordEdit.text.length !== 0)
-                    }
-
-                    font.capitalization: Font.AllUppercase
-                    text: isRendezVous ? JamiStrings.createNewRV : JamiStrings.createAccount
-                    enabled: checkEnable()
-                    color: checkEnable() ? JamiTheme.wizardBlueButtons :
-                                           JamiTheme.buttonTintedGreyInactive
-                    hoveredColor: JamiTheme.buttonTintedBlueHovered
-                    pressedColor: JamiTheme.buttonTintedBluePressed
-
-                    KeyNavigation.tab: backButton
-                    KeyNavigation.up: passwordSwitch.checked ? passwordConfirmEdit : passwordSwitch
-                    KeyNavigation.down: KeyNavigation.tab
+                    KeyNavigation.down: showAdvancedButton
 
                     onClicked: {
                         WizardViewStepModel.accountCreationInfo =
                                 JamiQmlUtils.setUpAccountCreationInputPara(
-                                    {isRendezVous : WizardViewStepModel.accountCreationOption ===
-                                                    WizardViewStepModel.AccountCreationOption.CreateRendezVous,
-                                     password : passwordEdit.text,
-                                     registeredName : usernameEdit.text})
-                        WizardViewStepModel.nextStep()
+                                    {registeredName : usernameEdit.text,
+                                        alias: advancedAccountSettingsPage.alias,
+                                        password: advancedAccountSettingsPage.validatedPassword,
+                                        avatar: UtilsAdapter.tempCreationImage()})
+                        if (usernameEdit.nameRegistrationState === UsernameLineEdit.NameRegistrationState.FREE) {
+                            enabled = false
+                            WizardViewStepModel.nextStep()
+                        }
+
+                        if(usernameEdit.nameRegistrationState === UsernameLineEdit.NameRegistrationState.BLANK)
+                            popup.visible = true
+
                     }
                 }
 
-                AccountCreationStepIndicator {
-                    Layout.topMargin: JamiTheme.wizardViewPageBackButtonMargins
-                    Layout.bottomMargin: JamiTheme.wizardViewPageBackButtonMargins
-                    Layout.alignment: Qt.AlignHCenter
+                MaterialButton {
+                    id: showAdvancedButton
 
-                    spacing: JamiTheme.wizardViewPageLayoutSpacing
-                    steps: 2
-                    currentStep: 2
+                    objectName: "showAdvancedButton"
+                    tertiary: true
+                    secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+
+                    Layout.alignment: Qt.AlignCenter
+                    preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
+
+                    text: JamiStrings.advancedAccountSettings
+                    toolTipText: JamiStrings.showAdvancedFeatures
+
+                    KeyNavigation.tab: backButton
+                    KeyNavigation.up: chooseUsernameButton
+                    KeyNavigation.down: backButton
+
+                    onClicked: createAccountStack.currentIndex++
+                }
+
+                NoUsernamePopup {
+                    id: popup
+
+                    visible: false
+
+                    onJoinClicked:
+                        chooseUsernameButton.enabled = false
                 }
             }
         }
+
+        AdvancedAccountSettings {
+            id: advancedAccountSettingsPage
+
+            objectName: "advancedAccountSettingsPage"
+
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            property int stackIndex: 1
+
+            onSaveButtonClicked: createAccountStack.currentIndex--
+        }
     }
 
     BackButton {
@@ -411,26 +265,164 @@ Rectangle {
 
         objectName: "createAccountPageBackButton"
 
+        preferredSize: JamiTheme.wizardViewPageBackButtonSize
+
         anchors.left: parent.left
         anchors.top: parent.top
         anchors.margins: JamiTheme.wizardViewPageBackButtonMargins
 
+        KeyNavigation.tab: usernameEdit
+        KeyNavigation.up: advancedAccountSettingsPage
+
+        KeyNavigation.down: usernameEdit
+
+        onClicked: {
+            if (createAccountStack.currentIndex > 0) {
+                createAccountStack.currentIndex--
+            } else {
+                WizardViewStepModel.previousStep()
+                goodToKnow.visible = false
+                helpOpened = false
+            }
+        }
+    }
+
+    PushButton {
+
+        id: infoBox
+        z:1
+
         preferredSize: JamiTheme.wizardViewPageBackButtonSize
 
-        KeyNavigation.tab: {
-            if (createAccountStack.currentIndex === nameRegistrationPage.stackIndex)
-                return usernameEdit
-            else
-                return passwordSwitch
-        }
-        KeyNavigation.up: {
-            if (createAccountStack.currentIndex === nameRegistrationPage.stackIndex)
-                return skipButton
-            else
-                return createAccountButton.enabled ? createAccountButton : passwordConfirmEdit
-        }
-        KeyNavigation.down: KeyNavigation.tab
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: JamiTheme.wizardViewPageBackButtonMargins
 
-        onClicked: WizardViewStepModel.previousStep()
+        normalColor: JamiTheme.backgroundColor
+        imageColor: JamiTheme.primaryForegroundColor
+
+        source: JamiResources.outline_info_24dp_svg
+
+        onHoveredChanged: {
+
+            goodToKnow.visible = !goodToKnow.visible
+            helpOpened = !helpOpened
+
+            advancedAccountSettingsPage.openedPassword = false
+            advancedAccountSettingsPage.openedNickname = false
+
+        }
+    }
+
+    Item {
+        id: goodToKnow
+        anchors.top: parent.top
+        anchors.right: parent.right
+
+        anchors.margins: JamiTheme.wizardViewPageBackButtonMargins + infoBox.preferredSize*2/5
+
+        width: helpOpened ? Math.min(root.width - 2 * JamiTheme.preferredMarginSize, 452) : 0
+        height: {
+            if (!helpOpened)
+                return 0
+            var finalHeight = title.height + 3 * JamiTheme.preferredMarginSize
+            finalHeight += flow.implicitHeight
+            return finalHeight
+        }
+
+        visible: false
+
+        Behavior on width {
+            NumberAnimation { duration: JamiTheme.shortFadeDuration }
+        }
+
+        Behavior on height {
+            NumberAnimation { duration: JamiTheme.shortFadeDuration}
+        }
+
+        DropShadow {
+            z: -1
+            anchors.fill: boxInfo
+            horizontalOffset: 3.0
+            verticalOffset: 3.0
+            radius: boxInfo.radius * 4
+            color: JamiTheme.shadowColor
+            source: boxInfo
+            transparentBorder: true
+        }
+
+        Rectangle {
+
+            id: boxInfo
+
+            z: 0
+            anchors.fill: parent
+            radius: 30
+            color: JamiTheme.secondaryBackgroundColor
+
+            ColumnLayout {
+
+                id: infoContainer
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.top: parent.top
+                visible: helpOpened ? 1 : 0
+
+                Behavior on visible {
+                    NumberAnimation {
+                        from: 0
+                        duration: JamiTheme.overlayFadeDuration
+                    }
+                }
+
+
+                Text {
+                    id: title
+                    text: JamiStrings.goodToKnow
+                    color: JamiTheme.textColor
+
+                    Layout.topMargin: 15
+                    Layout.alignment: Qt.AlignCenter | Qt.AlignTop
+
+                    font.pixelSize: JamiTheme.title2FontSize
+                    font.kerning: true
+                }
+
+                Flow {
+                    id: flow
+                    spacing: 25
+                    Layout.alignment: Qt.AlignTop
+                    Layout.leftMargin: JamiTheme.preferredMarginSize * 2
+                    Layout.preferredWidth: helpOpened ? Math.min(root.width - 2 * JamiTheme.preferredMarginSize, 452) : 0
+                    Layout.fillWidth: true
+
+                    InfoBox {
+                        id: info
+                        icoSource: JamiResources.laptop_black_24dp_svg
+                        title: JamiStrings.local
+                        description: JamiStrings.localAccount
+                    }
+
+                    InfoBox {
+                        icoSource: JamiResources.person_24dp_svg
+                        title: JamiStrings.username
+                        description: JamiStrings.usernameRecommened
+                    }
+
+                    InfoBox {
+                        icoSource: JamiResources.lock_svg
+                        title: JamiStrings.encrypt
+                        description: JamiStrings.passwordOptional
+                    }
+
+                    InfoBox {
+                        icoSource: JamiResources.noun_paint_svg
+                        title: JamiStrings.customize
+                        description: JamiStrings.customizeOptional
+                    }
+                }
+            }
+        }
     }
 }

src/app/wizardview/components/CreateSIPAccountPage.qml

@@ -21,15 +21,16 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 
-import net.jami.Models 1.1
+import net.jami.Adapters 1.1
 import net.jami.Constants 1.1
+import net.jami.Models 1.1
 
 import "../../commoncomponents"
 
 Rectangle {
     id: root
 
-    property int preferredHeight: createSIPAccountPageColumnLayout.implicitHeight
+    property int preferredHeight: createSIPAccountPageColumnLayout.implicitHeight + 2 * JamiTheme.preferredMarginSize
 
     signal showThisPage
 
@@ -38,6 +39,8 @@ Rectangle {
         sipPasswordEdit.clear()
         sipServernameEdit.clear()
         sipProxyEdit.clear()
+        displayNameLineEdit.clear()
+        UtilsAdapter.setTempCreationImageFromString()
     }
 
     Connections {
@@ -53,152 +56,268 @@ Rectangle {
         }
     }
 
-    color: JamiTheme.backgroundColor
+    color: JamiTheme.secondaryBackgroundColor
 
-    ColumnLayout {
-        id: createSIPAccountPageColumnLayout
+    StackLayout {
+        id: createAccountStack
 
-        spacing: JamiTheme.wizardViewPageLayoutSpacing
+        objectName: "createAccountStack"
+        anchors.fill: parent
 
-        anchors.centerIn: parent
+        Rectangle {
 
-        RowLayout {
-            spacing: JamiTheme.wizardViewPageLayoutSpacing
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            color: JamiTheme.secondaryBackgroundColor
 
-            Layout.alignment: Qt.AlignCenter
-            Layout.topMargin: JamiTheme.wizardViewPageBackButtonMargins
-            Layout.preferredWidth: createAccountButton.width
+            ColumnLayout {
+                id: createSIPAccountPageColumnLayout
 
-            Label {
-                text: JamiStrings.configureExistingSIP
-                color: JamiTheme.textColor
-                font.pointSize: JamiTheme.textFontSize + 3
-            }
 
-            BubbleLabel {
-                Layout.alignment: Qt.AlignRight
+                spacing: JamiTheme.wizardViewPageLayoutSpacing
 
-                text: JamiStrings.optional
-                bubbleColor: JamiTheme.wizardBlueButtons
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: parent.top
+                anchors.topMargin: JamiTheme.wizardViewLayoutTopMargin
+
+                width: Math.max(508, root.width - 100)
+
+                Label {
+
+                    text: JamiStrings.sipAccount
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.preferredWidth: Math.min(450, root.width - JamiTheme.preferredMarginSize * 2)
+                    Layout.topMargin: 15
+                    font.pixelSize: JamiTheme.wizardViewTitleFontPixelSize
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    color: JamiTheme.textColor
+                }
+
+                Label {
+                    text: JamiStrings.configureExistingSIP
+                    Layout.preferredWidth: Math.min(360, root.width - JamiTheme.preferredMarginSize * 2)
+                    Layout.topMargin: 15
+                    Layout.alignment: Qt.AlignCenter
+                    font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
+                    wrapMode: Text.WordWrap
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    color: JamiTheme.textColor
+                }
+
+                EditableLineEdit {
+                    id: sipServernameEdit
+
+                    objectName: "sipServernameEdit"
+
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
+
+                    focus: visible
+                    selectByMouse: true
+                    placeholderText: JamiStrings.server
+                    font.pointSize: JamiTheme.textFontSize
+                    font.kerning: true
+
+                    KeyNavigation.tab: sipProxyEdit
+                    KeyNavigation.up: backButton
+                    KeyNavigation.down: sipProxyEdit
+
+                    onEditingFinished: sipProxyEdit.forceActiveFocus()
+                }
+
+                EditableLineEdit {
+                    id: sipProxyEdit
+
+                    objectName: "sipProxyEdit"
+
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
+
+                    focus: visible
+                    selectByMouse: true
+                    placeholderText: JamiStrings.proxy
+                    font.pointSize: JamiTheme.textFontSize
+                    font.kerning: true
+
+                    KeyNavigation.tab: sipUsernameEdit
+                    KeyNavigation.up: sipServernameEdit
+                    KeyNavigation.down: sipUsernameEdit
+
+                    onEditingFinished: sipUsernameEdit.forceActiveFocus()
+                }
+
+                EditableLineEdit {
+                    id: sipUsernameEdit
+
+                    objectName: "sipUsernameEdit"
+
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
+
+                    selectByMouse: true
+                    placeholderText: JamiStrings.username
+                    font.pointSize: JamiTheme.textFontSize
+                    font.kerning: true
+
+                    KeyNavigation.tab: sipPasswordEdit
+                    KeyNavigation.up: sipProxyEdit
+                    KeyNavigation.down: sipPasswordEdit
+
+                    onEditingFinished: sipPasswordEdit.forceActiveFocus()
+                }
+
+                EditableLineEdit {
+                    id: sipPasswordEdit
+
+                    objectName: "sipPasswordEdit"
+
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
+
+                    selectByMouse: true
+                    echoMode: TextInput.Password
+
+                    placeholderText: JamiStrings.password
+                    font.pointSize: JamiTheme.textFontSize
+                    font.kerning: true
+
+                    KeyNavigation.tab: createAccountButton
+                    KeyNavigation.up: sipUsernameEdit
+                    KeyNavigation.down: createAccountButton
+
+                    secondIco: JamiResources.eye_cross_svg
+
+
+                    onEditingFinished: createAccountButton.forceActiveFocus()
+
+                    onSecondIcoClicked: { toggleEchoMode() }
+                }
+
+                MaterialButton {
+                    id: createAccountButton
+
+                    objectName: "createSIPAccountButton"
+
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.bottomMargin: JamiTheme.wizardViewPageBackButtonMargins
+
+                    preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
+
+                    text: JamiStrings.addSip
+
+                    KeyNavigation.tab: personalizeAccount
+                    KeyNavigation.up: sipPasswordEdit
+                    KeyNavigation.down: personalizeAccount
+
+                    onClicked: {
+                        WizardViewStepModel.accountCreationInfo =
+                                JamiQmlUtils.setUpAccountCreationInputPara(
+                                    {hostname : sipServernameEdit.text,
+                                        alias: displayNameLineEdit.text,
+                                        username : sipUsernameEdit.text,
+                                        password : sipPasswordEdit.text,
+                                        proxy : sipProxyEdit.text,
+                                        avatar: UtilsAdapter.tempCreationImage()})
+                        WizardViewStepModel.nextStep()
+                    }
+                }
+
+                MaterialButton {
+
+                    id: personalizeAccount
+                    text: JamiStrings.personalizeAccount
+                    tertiary: true
+                    secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+                    preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
+
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.bottomMargin: JamiTheme.wizardViewPageBackButtonMargins*2
+
+                    KeyNavigation.tab: backButton
+                    KeyNavigation.up: createAccountButton
+                    KeyNavigation.down: backButton
+
+                    onClicked: createAccountStack.currentIndex += 1
+                }
             }
         }
 
-        MaterialLineEdit {
-            id: sipServernameEdit
+        Rectangle {
 
-            objectName: "sipServernameEdit"
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            color: JamiTheme.secondaryBackgroundColor
 
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredHeight: fieldLayoutHeight
-            Layout.preferredWidth: createAccountButton.width
+            ColumnLayout {
+                spacing: JamiTheme.wizardViewPageLayoutSpacing
 
-            focus: visible
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: parent.top
+                anchors.topMargin: JamiTheme.wizardViewLayoutTopMargin
 
-            selectByMouse: true
-            placeholderText: JamiStrings.server
-            font.pointSize: JamiTheme.textFontSize
-            font.kerning: true
+                width: Math.max(508, root.width - 100)
 
-            KeyNavigation.tab: sipProxyEdit
-            KeyNavigation.up: backButton
-            KeyNavigation.down: KeyNavigation.tab
+                Label {
 
-            onAccepted: sipProxyEdit.forceActiveFocus()
-        }
+                    text: JamiStrings.personalizeAccount
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.preferredWidth: Math.min(450, root.width - JamiTheme.preferredMarginSize * 2)
+                    Layout.topMargin: 15
+                    font.pixelSize: 26
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    color: JamiTheme.textColor
+                }
 
-        MaterialLineEdit {
-            id: sipProxyEdit
+                PhotoboothView {
+                    id: currentAccountAvatar
+                    darkTheme: UtilsAdapter.luma(JamiTheme.primaryBackgroundColor)
 
-            objectName: "sipProxyEdit"
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.topMargin: 50
 
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredHeight: fieldLayoutHeight
-            Layout.preferredWidth: createAccountButton.width
+                    newItem: true
+                    imageId: visible ? "temp" : ""
+                    avatarSize: 150
+                    buttonSize: JamiTheme.smartListAvatarSize
+                }
 
-            selectByMouse: true
-            placeholderText: JamiStrings.proxy
-            font.pointSize: JamiTheme.textFontSize
-            font.kerning: true
+                EditableLineEdit {
 
-            KeyNavigation.tab: sipUsernameEdit
-            KeyNavigation.up: sipServernameEdit
-            KeyNavigation.down: KeyNavigation.tab
+                    id: displayNameLineEdit
 
-            onAccepted: sipUsernameEdit.forceActiveFocus()
-        }
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.preferredWidth: Math.min(300, root.width - JamiTheme.preferredMarginSize * 2)
+                    Layout.topMargin: 30
+                    verticalAlignment: Text.AlignVCenter
 
-        MaterialLineEdit {
-            id: sipUsernameEdit
+                    font.pointSize: JamiTheme.textFontSize
 
-            objectName: "sipUsernameEdit"
+                    placeholderText: JamiStrings.enterNickname
 
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredHeight: fieldLayoutHeight
-            Layout.preferredWidth: createAccountButton.width
+                    color: JamiTheme.textColor
+                }
 
-            selectByMouse: true
-            placeholderText: JamiStrings.username
-            font.pointSize: JamiTheme.textFontSize
-            font.kerning: true
+                Text {
 
-            KeyNavigation.tab: sipPasswordEdit
-            KeyNavigation.up: sipProxyEdit
-            KeyNavigation.down: KeyNavigation.tab
+                    Layout.topMargin: 15
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.preferredWidth: Math.min(320, root.width - JamiTheme.preferredMarginSize * 2)
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    wrapMode: Text.WordWrap
 
-            onAccepted: sipPasswordEdit.forceActiveFocus()
-        }
+                    text: JamiStrings.customizeProfileDescription
+                    font.pixelSize: JamiTheme.headerFontSize
+                    color: JamiTheme.textColor
+                }
 
-        MaterialLineEdit {
-            id: sipPasswordEdit
-
-            objectName: "sipPasswordEdit"
-
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredHeight: fieldLayoutHeight
-            Layout.preferredWidth: createAccountButton.width
-
-            selectByMouse: true
-            echoMode: TextInput.Password
-            placeholderText: JamiStrings.password
-            font.pointSize: JamiTheme.textFontSize
-            font.kerning: true
-
-            KeyNavigation.tab: createAccountButton
-            KeyNavigation.up: sipUsernameEdit
-            KeyNavigation.down: KeyNavigation.tab
-
-            onAccepted: createAccountButton.clicked()
-        }
-
-        MaterialButton {
-            id: createAccountButton
-
-            objectName: "createSIPAccountButton"
-
-            Layout.alignment: Qt.AlignCenter
-            Layout.bottomMargin: JamiTheme.wizardViewPageBackButtonMargins
-
-            preferredWidth: JamiTheme.wizardButtonWidth
-
-            text: JamiStrings.createSIPAccount
-            color: JamiTheme.wizardBlueButtons
-            hoveredColor: JamiTheme.buttonTintedBlueHovered
-            pressedColor: JamiTheme.buttonTintedBluePressed
-
-            KeyNavigation.tab: backButton
-            KeyNavigation.up: sipPasswordEdit
-            KeyNavigation.down: KeyNavigation.tab
-
-            onClicked: {
-                WizardViewStepModel.accountCreationInfo =
-                        JamiQmlUtils.setUpAccountCreationInputPara(
-                            {hostname : sipServernameEdit.text,
-                             username : sipUsernameEdit.text,
-                             password : sipPasswordEdit.text,
-                             proxy : sipProxyEdit.text})
-                WizardViewStepModel.nextStep()
             }
         }
+
+
     }
 
     BackButton {
@@ -213,9 +332,15 @@ Rectangle {
         preferredSize: JamiTheme.wizardViewPageBackButtonSize
 
         KeyNavigation.tab: sipServernameEdit
-        KeyNavigation.up: createAccountButton
-        KeyNavigation.down: KeyNavigation.tab
+        KeyNavigation.up: personalizeAccount
+        KeyNavigation.down: sipServernameEdit
 
-        onClicked: WizardViewStepModel.previousStep()
+        onClicked: {
+            if (createAccountStack.currentIndex !== 0) {
+                createAccountStack.currentIndex--
+            } else {
+                WizardViewStepModel.previousStep()
+            }
+        }
     }
 }

src/app/wizardview/components/ImportFromBackupPage.qml

@@ -31,7 +31,7 @@ import "../../commoncomponents"
 Rectangle {
     id: root
 
-    property int preferredHeight: importFromBackupPageColumnLayout.implicitHeight
+    property int preferredHeight: importFromBackupPageColumnLayout.implicitHeight + 2 * JamiTheme.preferredMarginSize
 
     property string fileImportBtnText: JamiStrings.archive
     property string filePath: ""
@@ -44,7 +44,7 @@ Rectangle {
         passwordFromBackupEdit.clear()
         filePath = ""
         errorText = ""
-        fileImportBtnText = JamiStrings.archive
+        fileImportBtnText = JamiStrings.selectArchiveFile
     }
 
     function errorOccured(errorMessage) {
@@ -65,7 +65,7 @@ Rectangle {
         }
     }
 
-    color: JamiTheme.backgroundColor
+    color: JamiTheme.secondaryBackgroundColor
 
     JamiFileDialog {
         id: importFromFileDialog
@@ -102,42 +102,58 @@ Rectangle {
         spacing: JamiTheme.wizardViewPageLayoutSpacing
 
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.verticalCenter: parent.verticalCenter
+        anchors.top: parent.top
+        anchors.topMargin: JamiTheme.wizardViewLayoutTopMargin
+
+        width: Math.max(508, root.width - 100)
 
         Text {
-            Layout.alignment: Qt.AlignCenter
-            Layout.topMargin: JamiTheme.wizardViewPageBackButtonMargins
 
-            text: JamiStrings.importFromBackup
+            text: JamiStrings.importFromArchiveBackup
+            Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: 15
+            Layout.preferredWidth: Math.min(360, root.width - JamiTheme.preferredMarginSize * 2)
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+
             color: JamiTheme.textColor
-            font.pointSize: JamiTheme.menuFontSize
+            font.pixelSize: JamiTheme.wizardViewTitleFontPixelSize
+            wrapMode : Text.WordWrap
+        }
+
+        Text {
+
+            text: JamiStrings.importFromArchiveBackupDescription
+            Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: 15
+            Layout.preferredWidth: Math.min(450, root.width - JamiTheme.preferredMarginSize * 2)
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: JamiTheme.textColor
+
+            font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
+            wrapMode : Text.WordWrap
         }
 
         MaterialButton {
             id: fileImportBtn
 
             objectName: "fileImportBtn"
+            secondary: true
+            color: JamiTheme.secAndTertiTextColor
+            secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
 
             Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: 35
 
-            preferredWidth: JamiTheme.wizardButtonWidth
+            preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
 
             text: fileImportBtnText
             toolTipText: JamiStrings.importAccountArchive
-            iconSource: JamiResources.round_folder_24dp_svg
-            color: JamiTheme.buttonTintedGrey
-            hoveredColor: JamiTheme.buttonTintedGreyHovered
-            pressedColor: JamiTheme.buttonTintedGreyPressed
 
             KeyNavigation.tab: passwordFromBackupEdit
-            KeyNavigation.up: {
-                if (backButton.visible)
-                    return backButton
-                else if (connectBtn.enabled)
-                    return connectBtn
-                return passwordFromBackupEdit
-            }
-            KeyNavigation.down: KeyNavigation.tab
+            KeyNavigation.up: backButton
+            KeyNavigation.down: passwordFromBackupEdit
 
             onClicked: {
                 errorText = ""
@@ -145,34 +161,14 @@ Rectangle {
             }
         }
 
-        Text {
-            // For multiline text, recursive rearrange warning will show up when
-            // directly assigning contentHeight to Layout.preferredHeight
-            property int preferredHeight: JamiTheme.wizardViewPageLayoutSpacing
-
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: fileImportBtn.width
-            Layout.preferredHeight: preferredHeight
-
-            text: JamiStrings.importAccountExplanation
-            color: JamiTheme.textColor
-            wrapMode: Text.Wrap
-
-            onTextChanged: function (text) {
-                var boundingRect = JamiQmlUtils.getTextBoundingRect(font, text)
-                preferredHeight += (boundingRect.width / fileImportBtn.preferredWidth)
-                        * boundingRect.height
-            }
-        }
-
-        MaterialLineEdit {
+        EditableLineEdit {
             id: passwordFromBackupEdit
 
             objectName: "passwordFromBackupEdit"
 
-            Layout.preferredHeight: fieldLayoutHeight
-            Layout.preferredWidth: connectBtn.width
             Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: 20
+            Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
 
             focus: visible
 
@@ -181,23 +177,18 @@ Rectangle {
             font.pointSize: JamiTheme.textFontSize
             font.kerning: true
 
+            secondIco: JamiResources.eye_cross_svg
+
             echoMode: TextInput.Password
 
-            KeyNavigation.tab: {
-                if (connectBtn.enabled)
-                    return connectBtn
-                else if (backButton.visible)
-                    return backButton
-                return fileImportBtn
-            }
+            KeyNavigation.tab: connectBtn.enabled ? connectBtn : backButton
             KeyNavigation.up: fileImportBtn
-            KeyNavigation.down: KeyNavigation.tab
+            KeyNavigation.down: connectBtn.enabled ? connectBtn : backButton
 
             onTextChanged: errorText = ""
-            onAccepted: {
-                if (connectBtn.enabled)
-                    connectBtn.clicked()
-            }
+
+            onSecondIcoClicked: { toggleEchoMode() }
+
         }
 
         SpinnerButton {
@@ -207,12 +198,15 @@ Rectangle {
 
             Layout.alignment: Qt.AlignCenter
             Layout.bottomMargin: errorLabel.visible ? 0 : JamiTheme.wizardViewPageBackButtonMargins
+            Layout.topMargin: 30
 
-            preferredWidth: JamiTheme.wizardButtonWidth
+            preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
 
             spinnerTriggeredtext: JamiStrings.generatingAccount
             normalText: JamiStrings.connectFromBackup
 
+            color: JamiTheme.tintedBlue
+
             enabled: {
                 if (spinnerTriggered)
                     return false
@@ -221,13 +215,9 @@ Rectangle {
                 return false
             }
 
-            KeyNavigation.tab: {
-                if (backButton.visible)
-                    return backButton
-                return fileImportBtn
-            }
+            KeyNavigation.tab: backButton
             KeyNavigation.up: passwordFromBackupEdit
-            KeyNavigation.down: KeyNavigation.tab
+            KeyNavigation.down: backButton
 
             onClicked: {
                 if (connectBtn.focus)
@@ -237,7 +227,7 @@ Rectangle {
                 WizardViewStepModel.accountCreationInfo =
                         JamiQmlUtils.setUpAccountCreationInputPara(
                             {archivePath : UtilsAdapter.getAbsPath(filePath),
-                             password : passwordFromBackupEdit.text})
+                                password : passwordFromBackupEdit.text})
                 WizardViewStepModel.nextStep()
             }
         }
@@ -277,7 +267,7 @@ Rectangle {
                 return connectBtn
             return passwordFromBackupEdit
         }
-        KeyNavigation.down: KeyNavigation.tab
+        KeyNavigation.down: fileImportBtn
 
         onClicked: WizardViewStepModel.previousStep()
     }

src/app/wizardview/components/ImportFromDevicePage.qml

@@ -30,7 +30,7 @@ Rectangle {
     id: root
 
     property string errorText: ""
-    property int preferredHeight: importFromDevicePageColumnLayout.implicitHeight
+    property int preferredHeight: importFromDevicePageColumnLayout.implicitHeight + 2 * JamiTheme.preferredMarginSize
 
     signal showThisPage
 
@@ -62,81 +62,92 @@ Rectangle {
         }
     }
 
-    color: JamiTheme.backgroundColor
+    color: JamiTheme.secondaryBackgroundColor
 
     ColumnLayout {
         id: importFromDevicePageColumnLayout
 
+
         spacing: JamiTheme.wizardViewPageLayoutSpacing
 
-        // Prevent possible anchor loop detected on centerIn.
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.verticalCenter: parent.verticalCenter
+        anchors.top: parent.top
+        anchors.topMargin: JamiTheme.wizardViewLayoutTopMargin
+
+        width: Math.max(508, root.width - 100)
 
         Text {
-            Layout.alignment: Qt.AlignCenter
-            Layout.topMargin: JamiTheme.wizardViewPageBackButtonMargins
 
-            text: JamiStrings.mainAccountPassword
+            text: JamiStrings.importAccountFromAnotherDevice
+            Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: 15
+            Layout.preferredWidth: Math.min(360, root.width - JamiTheme.preferredMarginSize * 2)
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
             color: JamiTheme.textColor
-            font.pointSize: JamiTheme.menuFontSize
-        }
 
-        MaterialLineEdit {
-            id: passwordFromDevice
-
-            objectName: "passwordFromDevice"
-
-            Layout.preferredHeight: fieldLayoutHeight
-            Layout.preferredWidth: connectBtn.width
-            Layout.alignment: Qt.AlignCenter
-
-            selectByMouse: true
-            placeholderText: JamiStrings.password
-            font.pointSize: JamiTheme.textFontSize
-            font.kerning: true
-
-            echoMode: TextInput.Password
-
-            KeyNavigation.tab: pinFromDevice
-            KeyNavigation.up: {
-                if (backButton.visible)
-                    return backButton
-                return pinFromDevice
-            }
-            KeyNavigation.down: KeyNavigation.tab
-
-            onTextChanged: errorText = ""
-            onAccepted: pinFromDevice.forceActiveFocus()
+            font.pixelSize: JamiTheme.wizardViewTitleFontPixelSize
+            wrapMode : Text.WordWrap
         }
 
         Text {
-            property int preferredHeight: JamiTheme.wizardViewPageLayoutSpacing
-
 
+            text: JamiStrings.importFromDeviceDescription
+            Layout.preferredWidth: Math.min(360, root.width - JamiTheme.preferredMarginSize * 2)
+            Layout.topMargin: 15
             Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: connectBtn.width
-            Layout.preferredHeight: preferredHeight
-
-            text: JamiStrings.enterPIN
+            font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
             color: JamiTheme.textColor
-            wrapMode: Text.Wrap
-
-            onTextChanged: function (text) {
-                var boundingRect = JamiQmlUtils.getTextBoundingRect(font, text)
-                preferredHeight += (boundingRect.width / connectBtn.preferredWidth)
-                        * boundingRect.height
-            }
+            wrapMode: Text.WordWrap
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
         }
 
-        MaterialLineEdit {
+        Flow {
+            spacing: 30
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: 40
+            Layout.preferredWidth: Math.min(step1.width * 2 + 2 * spacing, root.width - JamiTheme.preferredMarginSize * 2)
+
+            InfoBox {
+                id: step1
+                icoSource: JamiResources.settings_24dp_svg
+                title: JamiStrings.importStep1
+                description: JamiStrings.importStep1Desc
+            }
+
+            InfoBox {
+                id: step2
+                icoSource: JamiResources.person_24dp_svg
+                title: JamiStrings.importStep2
+                description: JamiStrings.importStep2Desc
+            }
+
+            InfoBox {
+                id: step3
+                icoSource: JamiResources.finger_select_svg
+                title: JamiStrings.importStep3
+                description: JamiStrings.importStep3Desc
+            }
+
+            InfoBox {
+                id: step4
+                icoSource: JamiResources.time_clock_svg
+                title: JamiStrings.importStep4
+                description: JamiStrings.importStep4Desc
+            }
+
+        }
+
+        EditableLineEdit {
             id: pinFromDevice
 
+
             objectName: "pinFromDevice"
 
-            Layout.preferredHeight: fieldLayoutHeight
-            Layout.preferredWidth: connectBtn.width
             Layout.alignment: Qt.AlignCenter
+            Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
+            Layout.topMargin: 22
 
             focus: visible
 
@@ -156,21 +167,47 @@ Rectangle {
             KeyNavigation.down: KeyNavigation.tab
 
             onTextChanged: errorText = ""
-            onAccepted: {
-                if (connectBtn.enabled)
-                    connectBtn.clicked()
-            }
+
+        }
+
+        EditableLineEdit {
+            id: passwordFromDevice
+
+            objectName: "passwordFromDevice"
+            underlined: true
+            Layout.alignment: Qt.AlignCenter
+            Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
+
+            secondIco: JamiResources.eye_cross_svg
+
+            selectByMouse: true
+            placeholderText: JamiStrings.password
+            font.pointSize: JamiTheme.textFontSize
+            font.kerning: true
+
+            echoMode: TextInput.Password
+
+            KeyNavigation.tab: connectBtn.enabled ? connectBtn : backButton
+            KeyNavigation.up: pinFromDevice
+            KeyNavigation.down: connectBtn.enabled ? connectBtn : backButton
+
+            onTextChanged: errorText = ""
+            onEditingFinished: pinFromDevice.forceActiveFocus()
+
+            onSecondIcoClicked: { toggleEchoMode() }
         }
 
         SpinnerButton {
             id: connectBtn
+            color: JamiTheme.tintedBlue
 
             objectName: "importFromDevicePageConnectBtn"
 
             Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: 22
             Layout.bottomMargin: errorLabel.visible ? 0 : JamiTheme.wizardViewPageBackButtonMargins
 
-            preferredWidth: JamiTheme.wizardButtonWidth
+            preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
 
             spinnerTriggeredtext: JamiStrings.generatingAccount
             normalText: JamiStrings.connectFromAnotherDevice
@@ -178,8 +215,8 @@ Rectangle {
             enabled: pinFromDevice.text.length !== 0 && !spinnerTriggered
 
             KeyNavigation.tab: backButton
-            KeyNavigation.up: pinFromDevice
-            KeyNavigation.down: KeyNavigation.tab
+            KeyNavigation.up: passwordFromDevice
+            KeyNavigation.down: backButton
 
             onClicked: {
                 spinnerTriggered = true
@@ -187,7 +224,7 @@ Rectangle {
                 WizardViewStepModel.accountCreationInfo =
                         JamiQmlUtils.setUpAccountCreationInputPara(
                             {archivePin : pinFromDevice.text,
-                             password : passwordFromDevice.text})
+                                password : passwordFromDevice.text})
                 WizardViewStepModel.nextStep()
             }
         }
@@ -214,13 +251,13 @@ Rectangle {
 
         anchors.left: parent.left
         anchors.top: parent.top
-        anchors.margins: 20
+        anchors.margins: 10
 
         visible: !connectBtn.spinnerTriggered
 
-        KeyNavigation.tab: passwordFromDevice
-        KeyNavigation.up: connectBtn
-        KeyNavigation.down: KeyNavigation.tab
+        KeyNavigation.tab: pinFromDevice
+        KeyNavigation.up: connectBtn.enabled ? connectBtn : passwordFromDevice
+        KeyNavigation.down: pinFromDevice
 
         preferredSize: JamiTheme.wizardViewPageBackButtonSize
 

src/app/wizardview/components/NoUsernamePopup.qml

@@ -0,0 +1,109 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ * Author: Fadi Shehadeh <fadi.shehadeh@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+import net.jami.Models 1.1
+import net.jami.Adapters 1.1
+import net.jami.Constants 1.1
+import Qt5Compat.GraphicalEffects
+
+
+import "../../commoncomponents"
+
+BaseModalDialog {
+    id: root
+    width: 350
+    height: 240
+
+    signal joinClicked
+
+    popupContent: Item {
+
+        ColumnLayout {
+
+            anchors.fill: parent
+            anchors.bottomMargin: 30
+
+            PushButton {
+                id: btnClose
+                Layout.alignment: Qt.AlignRight
+
+                width: 30
+                height: 30
+                imageContainerWidth: 30
+                imageContainerHeight : 30
+                Layout.rightMargin: 8
+
+                radius : 5
+
+                imageColor: "grey"
+                normalColor: JamiTheme.transparentColor
+
+                source: JamiResources.round_close_24dp_svg
+
+                onClicked: { root.visible = false }
+            }
+
+            Text {
+
+                Layout.preferredWidth: 280
+                Layout.leftMargin: 20
+                Layout.rightMargin: 20
+                Layout.alignment: Qt.AlignCenter
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                font.pixelSize: 15
+                font.weight: Font.Medium
+                wrapMode: Text.WordWrap
+                color: JamiTheme.textColor
+                text: JamiStrings.joinJamiNoPassword
+            }
+
+            RowLayout{
+
+                Layout.alignment: Qt.AlignCenter
+
+                MaterialButton {
+                    preferredWidth: 96
+                    Layout.alignment: Qt.AlignCenter
+                    secondary: true
+                    color: JamiTheme.secAndTertiTextColor
+                    secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+                    text: JamiStrings.joinJami
+                    onClicked: {
+                        root.joinClicked()
+                        WizardViewStepModel.nextStep()
+                        root.close()
+                    }
+                }
+
+                MaterialButton {
+                    preferredWidth: 170
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.leftMargin: 20
+                    primary:true
+                    text:  JamiStrings.chooseAUsername
+                    onClicked: root.close()
+                }
+            }
+        }
+    }
+}

src/app/wizardview/components/ProfilePage.qml

@@ -220,7 +220,7 @@ Rectangle {
             color: enabled? JamiTheme.buttonTintedGrey : JamiTheme.buttonTintedGreyInactive
             hoveredColor: JamiTheme.buttonTintedGreyHovered
             pressedColor: JamiTheme.buttonTintedGreyPressed
-            outlined: true
+            secondary: true
 
             KeyNavigation.up: saveProfileBtn
 

src/app/wizardview/components/WelcomePage.qml

@@ -27,15 +27,19 @@ import net.jami.Constants 1.1
 
 import "../../commoncomponents"
 
+
 Rectangle {
     id: root
 
-    property int preferredHeight: welcomePageColumnLayout.implicitHeight
+    property int preferredHeight: welcomePageColumnLayout.implicitHeight + 2 * JamiTheme.wizardViewPageBackButtonMargins + JamiTheme.wizardViewPageBackButtonSize
+    property bool showTab: false
+    property bool showAlreadyHave: false
+    property bool showAdvanced: false
 
-    signal scrollToBottom
     signal showThisPage
 
-    color: JamiTheme.transparentColor
+    color: JamiTheme.secondaryBackgroundColor
+    opacity: 0.93
 
     Connections {
         target: WizardViewStepModel
@@ -56,222 +60,269 @@ Rectangle {
     KeyNavigation.up: newAccountButton
     KeyNavigation.down: KeyNavigation.tab
 
+
     ColumnLayout {
         id: welcomePageColumnLayout
 
-        anchors.centerIn: parent
-
         spacing: JamiTheme.wizardViewPageLayoutSpacing
 
-        Text {
-            id: welcomeLabel
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: JamiTheme.wizardViewLayoutTopMargin
+        width: Math.max(508, root.width - 100)
 
-            Layout.alignment: Qt.AlignCenter
-            Layout.topMargin: JamiTheme.wizardViewPageBackButtonMargins
-            Layout.preferredHeight: contentHeight
-
-            text: JamiStrings.welcomeTo
-            color: JamiTheme.textColor
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-
-            font.pointSize: JamiTheme.welcomeLabelPointSize
-            font.kerning: true
-        }
 
         ResponsiveImage {
             id: welcomeLogo
 
-            Layout.alignment: Qt.AlignCenter
+            Layout.alignment: Qt.AlignCenter | Qt.AlignTop
+
             Layout.preferredWidth: JamiTheme.welcomeLogoWidth
             Layout.preferredHeight: JamiTheme.welcomeLogoHeight
 
-            source: JamiTheme.darkTheme ?
-                        JamiResources.logo_jami_standard_coul_white_svg :
-                        JamiResources.logo_jami_standard_coul_svg
+            source: JamiResources.jami_svg
+        }
+
+        Text {
+            id: introduction
+
+            Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: JamiTheme.wizardViewPageBackButtonMargins
+            Layout.preferredWidth: Math.min(350, root.width - JamiTheme.preferredMarginSize * 2)
+
+            text: JamiStrings.introductionJami
+            color: JamiTheme.textColor
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            wrapMode : Text.WordWrap
+
+            font.pixelSize: JamiTheme.wizardViewTitleFontPixelSize
+            font.kerning: true
+        }
+
+        Text {
+            id: description
+
+            Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: JamiTheme.wizardViewPageBackButtonMargins
+            Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
+
+            text: JamiStrings.description
+            color: JamiTheme.textColor
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            wrapMode : Text.WordWrap
+            lineHeight: 1.4
+
+            font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
+            font.kerning: true
         }
 
         MaterialButton {
             id: newAccountButton
 
             objectName: "newAccountButton"
+            primary: true
 
             Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: 21
+            preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
 
-            preferredWidth: JamiTheme.wizardButtonWidth
-
-            text: JamiStrings.createAJamiAccount
-            font.capitalization: Font.AllUppercase
+            text: JamiStrings.joinJami
             toolTipText: JamiStrings.createNewJamiAccount
-            iconSource: JamiResources.default_avatar_overlay_svg
 
-            KeyNavigation.tab: newRdvButton
+            KeyNavigation.tab: alreadyHaveAccount
             KeyNavigation.up: backButton.visible ? backButton :
                                                    (showAdvancedButton.showAdvanced ?
                                                         newSIPAccountButton :
                                                         showAdvancedButton)
             KeyNavigation.down: KeyNavigation.tab
 
-            onClicked: WizardViewStepModel.startAccountCreationFlow(
-                           WizardViewStepModel.AccountCreationOption.CreateJamiAccount)
+            onClicked: WizardViewStepModel.startAccountCreationFlow(WizardViewStepModel.AccountCreationOption.CreateJamiAccount)
         }
 
         MaterialButton {
-            id: newRdvButton
+            id: alreadyHaveAccount
 
-            objectName: "newRdvButton"
+            objectName: "alreadyHaveAccount"
+            primary: true
+
+            preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
 
             Layout.alignment: Qt.AlignCenter
 
-            preferredWidth: JamiTheme.wizardButtonWidth
+            text: JamiStrings.alreadyHaveAccount
+            toolTipText: JamiStrings.useExistingAccount
+
+            font.bold: true
+
+            hoverEnabled: true
+
+            KeyNavigation.tab: showAlreadyHave ? fromDeviceButton : showAdvancedButton
 
-            text: JamiStrings.createNewRV
-            font.capitalization: Font.AllUppercase
-            toolTipText: JamiStrings.createNewRV
-            iconSource: JamiResources.groups_24dp_svg
 
-            KeyNavigation.tab: fromDeviceButton
             KeyNavigation.up: newAccountButton
             KeyNavigation.down: KeyNavigation.tab
 
-            onClicked: WizardViewStepModel.startAccountCreationFlow(
-                           WizardViewStepModel.AccountCreationOption.CreateRendezVous)
+            onClicked: {
+                boldFont = !boldFont
+                showAlreadyHave = !showAlreadyHave
+                showAdvanced = false
+                fromDeviceButton.visible = showAlreadyHave
+                fromBackupButton.visible = showAlreadyHave
+                newRdvButton.visible = showAdvanced
+                connectAccountManagerButton.visible = showAdvanced
+                newSIPAccountButton.visible = showAdvanced
+
+            }
         }
 
         MaterialButton {
             id: fromDeviceButton
 
             objectName: "fromDeviceButton"
+            secondary: true
+            color: JamiTheme.secAndTertiTextColor
+            secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
 
             Layout.alignment: Qt.AlignCenter
 
-            preferredWidth: JamiTheme.wizardButtonWidth
+            preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
 
-            text: JamiStrings.linkFromAnotherDevice
-            font.capitalization: Font.AllUppercase
-            toolTipText: JamiStrings.importAccountFromOtherDevice
-            iconSource: JamiResources.devices_24dp_svg
-            color: JamiTheme.buttonTintedBlue
-            hoveredColor: JamiTheme.buttonTintedBlueHovered
-            pressedColor: JamiTheme.buttonTintedBluePressed
+            visible: false
+
+            text: JamiStrings.importAccountFromAnotherDevice
+            toolTipText: JamiStrings.linkFromAnotherDevice
 
             KeyNavigation.tab: fromBackupButton
-            KeyNavigation.up: newRdvButton
+            KeyNavigation.up: alreadyHaveAccount
             KeyNavigation.down: KeyNavigation.tab
 
-            onClicked: WizardViewStepModel.startAccountCreationFlow(
-                           WizardViewStepModel.AccountCreationOption.ImportFromDevice)
+            onClicked: WizardViewStepModel.startAccountCreationFlow(WizardViewStepModel.AccountCreationOption.ImportFromDevice)
         }
 
         MaterialButton {
             id: fromBackupButton
 
             objectName: "fromBackupButton"
+            secondary: true
+            color: JamiTheme.secAndTertiTextColor
+            secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+
+            visible: false
 
             Layout.alignment: Qt.AlignCenter
+            preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
 
-            preferredWidth: JamiTheme.wizardButtonWidth
-
-            text: JamiStrings.connectFromBackup
-            font.capitalization: Font.AllUppercase
-            toolTipText: JamiStrings.importAccountFromBackup
-            iconSource: JamiResources.backup_24dp_svg
-            color: JamiTheme.buttonTintedBlue
-            hoveredColor: JamiTheme.buttonTintedBlueHovered
-            pressedColor: JamiTheme.buttonTintedBluePressed
+            text: JamiStrings.importAccountFromBackup
+            toolTipText: JamiStrings.connectFromBackup
 
             KeyNavigation.tab: showAdvancedButton
             KeyNavigation.up: fromDeviceButton
             KeyNavigation.down: KeyNavigation.tab
 
-            onClicked: WizardViewStepModel.startAccountCreationFlow(
-                           WizardViewStepModel.AccountCreationOption.ImportFromBackup)
+            onClicked: WizardViewStepModel.startAccountCreationFlow(WizardViewStepModel.AccountCreationOption.ImportFromBackup)
         }
 
+
         MaterialButton {
             id: showAdvancedButton
 
             objectName: "showAdvancedButton"
-
-            property bool showAdvanced: false
+            tertiary: true
+            secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
 
             Layout.alignment: Qt.AlignCenter
             Layout.bottomMargin: newSIPAccountButton.visible ?
                                      0 : JamiTheme.wizardViewPageBackButtonMargins
 
-            preferredWidth: JamiTheme.wizardButtonWidth
-
+            preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
             text: JamiStrings.advancedFeatures
-            font.capitalization: Font.AllUppercase
             toolTipText: showAdvanced ? JamiStrings.hideAdvancedFeatures :
                                         JamiStrings.showAdvancedFeatures
-            color: JamiTheme.buttonTintedBlue
-            hoveredColor: JamiTheme.buttonTintedBlueHovered
-            pressedColor: JamiTheme.buttonTintedBluePressed
-            outlined: true
 
-            hoverEnabled: true
 
-            KeyNavigation.tab: showAdvanced ? connectAccountManagerButton :
-                                              (backButton.visible ? backButton : newAccountButton)
-            KeyNavigation.up: fromBackupButton
+            KeyNavigation.tab: showAdvanced ? newRdvButton : btnAboutPopUp
+            KeyNavigation.up: showAlreadyHave ? fromBackupButton : alreadyHaveAccount
             KeyNavigation.down: KeyNavigation.tab
 
             onClicked: {
+                boldFont = !boldFont
                 showAdvanced = !showAdvanced
+                showAlreadyHave = false
+                newRdvButton.visible = showAdvanced
                 connectAccountManagerButton.visible = showAdvanced
                 newSIPAccountButton.visible = showAdvanced
+                fromDeviceButton.visible = showAlreadyHave
+                fromBackupButton.visible = showAlreadyHave
             }
         }
 
+        MaterialButton {
+            id: newRdvButton
+
+            objectName: "newRdvButton"
+            secondary: true
+            color: JamiTheme.secAndTertiTextColor
+            secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+
+            Layout.alignment: Qt.AlignCenter
+
+            preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
+            visible: false
+
+            text: JamiStrings.createNewRV
+            toolTipText: JamiStrings.createNewRV
+
+            KeyNavigation.tab: connectAccountManagerButton
+            KeyNavigation.up: showAdvancedButton
+            KeyNavigation.down: connectAccountManagerButton
+
+            onClicked: WizardViewStepModel.startAccountCreationFlow(WizardViewStepModel.AccountCreationOption.CreateRendezVous)
+        }
+
         MaterialButton {
             id: connectAccountManagerButton
 
             objectName: "connectAccountManagerButton"
+            secondary: true
+            color: JamiTheme.secAndTertiTextColor
+            secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
 
             Layout.alignment: Qt.AlignCenter
 
-            preferredWidth: JamiTheme.wizardButtonWidth
-
+            preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
             visible: false
 
             text: JamiStrings.connectJAMSServer
-            font.capitalization: Font.AllUppercase
             toolTipText: JamiStrings.createFromJAMS
-            iconSource: JamiResources.router_24dp_svg
-            color: JamiTheme.buttonTintedBlue
-            hoveredColor: JamiTheme.buttonTintedBlueHovered
-            pressedColor: JamiTheme.buttonTintedBluePressed
 
             KeyNavigation.tab: newSIPAccountButton
-            KeyNavigation.up: showAdvancedButton
-            KeyNavigation.down: KeyNavigation.tab
+            KeyNavigation.up: newRdvButton
+            KeyNavigation.down: newSIPAccountButton
 
-            onClicked: WizardViewStepModel.startAccountCreationFlow(
-                           WizardViewStepModel.AccountCreationOption.ConnectToAccountManager)
+            onClicked: WizardViewStepModel.startAccountCreationFlow(WizardViewStepModel.AccountCreationOption.ConnectToAccountManager)
         }
 
         MaterialButton {
             id: newSIPAccountButton
 
             objectName: "newSIPAccountButton"
+            secondary: true
+            color: JamiTheme.secAndTertiTextColor
+            secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+            pressedColor: JamiTheme.buttonTintedBluePressed
 
             Layout.alignment: Qt.AlignCenter
             Layout.bottomMargin: JamiTheme.wizardViewPageBackButtonMargins
 
-            preferredWidth: JamiTheme.wizardButtonWidth
-
+            preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
             visible: false
 
             text: JamiStrings.addSIPAccount
-            font.capitalization: Font.AllUppercase
             toolTipText: JamiStrings.createNewSipAccount
-            iconSource: JamiResources.default_avatar_overlay_svg
-            color: JamiTheme.buttonTintedBlue
-            hoveredColor: JamiTheme.buttonTintedBlueHovered
-            pressedColor: JamiTheme.buttonTintedBluePressed
 
-            KeyNavigation.tab: backButton.visible ? backButton : newAccountButton
+            KeyNavigation.tab: btnAboutPopUp
             KeyNavigation.up: connectAccountManagerButton
             KeyNavigation.down: KeyNavigation.tab
 
@@ -279,7 +330,26 @@ Rectangle {
                            WizardViewStepModel.AccountCreationOption.CreateSipAccount)
         }
 
-        onHeightChanged: scrollToBottom()
+
+        MaterialButton {
+            id: btnAboutPopUp
+
+            Layout.alignment: Qt.AlignBottom | Qt.AlignHCenter
+            Layout.bottomMargin: JamiTheme.preferredMarginSize
+
+            preferredWidth: JamiTheme.aboutButtonPreferredWidth
+
+            secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+            tertiary: true
+
+            KeyNavigation.tab: backButton.visible ? backButton : newAccountButton
+            KeyNavigation.up: connectAccountManagerButton
+            KeyNavigation.down: KeyNavigation.tab
+
+            text: JamiStrings.aboutJami
+
+            onClicked: aboutPopUpDialog.open()
+        }
     }
 
     BackButton {
@@ -304,9 +374,11 @@ Rectangle {
         visible: UtilsAdapter.getAccountListSize()
 
         KeyNavigation.tab: newAccountButton
-        KeyNavigation.up: newSIPAccountButton
+        KeyNavigation.up: showAdvanced ? newSIPAccountButton : showAdvancedButton
         KeyNavigation.down: KeyNavigation.tab
 
         onClicked: WizardViewStepModel.previousStep()
+
     }
+
 }

src/app/wizardviewstepmodel.cpp

@@ -36,12 +36,21 @@ WizardViewStepModel::WizardViewStepModel(LRCInstance* lrcInstance,
         accountAdapter_->changeAccount(index);
 
         auto accountCreationOption = get_accountCreationOption();
-        if (accountCreationOption == AccountCreationOption::ConnectToAccountManager)
-            set_mainStep(MainSteps::Profile);
-        else if (accountCreationOption == AccountCreationOption::ImportFromBackup
-                 || accountCreationOption == AccountCreationOption::ImportFromDevice) {
+        if (accountCreationOption == AccountCreationOption::ConnectToAccountManager
+            || accountCreationOption == AccountCreationOption::CreateSipAccount) {
             Q_EMIT closeWizardView();
             reset();
+        } else if (accountCreationOption != AccountCreationOption::None) {
+            auto showBackup = (accountCreationOption == AccountCreationOption::CreateJamiAccount
+                               || accountCreationOption == AccountCreationOption::CreateRendezVous)
+                              && !appSettingsManager_->getValue(Settings::Key::NeverShowMeAgain)
+                                      .toBool();
+            if (showBackup)
+                set_mainStep(MainSteps::BackupKeys);
+            else {
+                Q_EMIT closeWizardView();
+                reset();
+            }
         }
 
         Q_EMIT accountIsReady(accountId);
@@ -67,11 +76,16 @@ WizardViewStepModel::nextStep()
         return;
 
     switch (get_mainStep()) {
+    case MainSteps::NameRegistration:
     case MainSteps::AccountCreation: {
         switch (get_accountCreationOption()) {
+        case AccountCreationOption::CreateJamiAccount:
+        case AccountCreationOption::CreateRendezVous:
         case AccountCreationOption::ImportFromBackup:
         case AccountCreationOption::ImportFromDevice: {
-            accountAdapter_->createJamiAccount("", get_accountCreationInfo(), false);
+            accountAdapter_->createJamiAccount(get_accountCreationInfo()["registeredName"].toString(),
+                                               get_accountCreationInfo(),
+                                               false);
             break;
         }
         case AccountCreationOption::ConnectToAccountManager: {
@@ -79,38 +93,12 @@ WizardViewStepModel::nextStep()
             break;
         }
         case AccountCreationOption::CreateSipAccount: {
-            set_mainStep(MainSteps::Profile);
             accountAdapter_->createSIPAccount(get_accountCreationInfo());
             break;
         }
         }
         break;
     }
-    case MainSteps::NameRegistration: {
-        set_mainStep(MainSteps::SetPassword);
-        break;
-    }
-    case MainSteps::SetPassword: {
-        set_mainStep(MainSteps::Profile);
-
-        auto accountCreationInfo = get_accountCreationInfo();
-        accountAdapter_->createJamiAccount(accountCreationInfo["registeredName"].toString(),
-                                           accountCreationInfo,
-                                           true);
-        break;
-    }
-    case MainSteps::Profile: {
-        auto showBackup = (accountCreationOption == AccountCreationOption::CreateJamiAccount
-                           || accountCreationOption == AccountCreationOption::CreateRendezVous)
-                          && !appSettingsManager_->getValue(Settings::Key::NeverShowMeAgain).toBool();
-        if (showBackup)
-            set_mainStep(MainSteps::BackupKeys);
-        else {
-            Q_EMIT closeWizardView();
-            reset();
-        }
-        break;
-    }
     case MainSteps::BackupKeys: {
         Q_EMIT closeWizardView();
         reset();
@@ -132,10 +120,6 @@ WizardViewStepModel::previousStep()
         reset();
         break;
     }
-    case MainSteps::SetPassword: {
-        set_mainStep(MainSteps::NameRegistration);
-        break;
-    }
     }
 }
 

src/app/wizardviewstepmodel.h

@@ -38,8 +38,6 @@ public:
         Initial,          // Initial welcome step.
         AccountCreation,  // General account creation step.
         NameRegistration, // Name registration step : CreateJamiAccount, CreateRendezVous
-        SetPassword,      // Password set up step: CreateJamiAccount, CreateRendezVous
-        Profile,          // Profile set up.
         BackupKeys        // Backup set up.
     };
     Q_ENUM(MainSteps)