Improve consistency of emoji picker

Now use Kirigami.Units and Kirigami.Theme, this also fix at the same
time a few issues on the dark theme.

imports/NeoChat/Component/ChatTextInput.qml

@@ -52,6 +52,16 @@ Control {
 
     contentItem: ColumnLayout {
         spacing: 0
+        EmojiPicker {
+            id: emojiPicker
+
+            Layout.fillWidth: true
+
+            visible: false
+
+            textArea: inputField
+            emojiModel: EmojiModel { id: emojiModel }
+        }
 
         RowLayout {
             Layout.fillWidth: true
@@ -70,8 +80,8 @@ Control {
 
                 contentItem: RowLayout {
                     Kirigami.Avatar {
-                        Layout.preferredWidth: 24
+                        Layout.preferredWidth: Kirigami.Units.gridUnit
-                        Layout.preferredHeight: 24
+                        Layout.preferredHeight: Kirigami.Units.gridUnit
 
                         source: replyUser ? "image://mxc/" + replyUser.avatarMediaId: ""
                         name: replyUser ? replyUser.displayName : "No name"
@@ -132,22 +142,21 @@ Control {
                 }
 
                 contentItem: RowLayout {
-                    spacing: 6
+                    spacing: Kirigami.Units.largeSpacing
 
-                    Text {
+                    Label {
-                        width: 24
+                        width: Kirigami.Units.gridUnit
-                        height: 24
+                        height: Kirigami.Units.gridUnit
                         visible: isEmoji
                         text: autoCompleteText
-                        font.pixelSize: 24
                         font.family: "Emoji"
                         verticalAlignment: Text.AlignVCenter
                         horizontalAlignment: Text.AlignHCenter
                     }
 
                     Kirigami.Avatar {
-                        Layout.preferredWidth: 24
+                        Layout.preferredWidth: Kirigami.Units.gridUnit
-                        Layout.preferredHeight: 24
+                        Layout.preferredHeight: Kirigami.Units.gridUnit
                         
                         source: modelData.avatarMediaId ? "image://mxc/" + modelData.avatarMediaId : ""
                         color: modelData.color ? Qt.darker(modelData.color, 1.1) : null
@@ -159,7 +168,7 @@ Control {
                         text: autoCompleteText
                         color: highlighted ? Kirigami.Theme.highlightTextColor : Kirigami.Theme.textColor
                         verticalAlignment: Text.AlignVCenter
-                        rightPadding: 8
+                        rightPadding: Kirigami.Units.largeSpacing
                     }
                 }
 
@@ -173,12 +182,9 @@ Control {
             }
         }
 
-        Rectangle {
+        Kirigami.Separator {
             Layout.fillWidth: true
             Layout.preferredHeight: 1
-            Layout.leftMargin: 12
-            Layout.rightMargin: 12
-
             visible: emojiPicker.visible || replyItem.visible || autoCompleteListView.visible
         }
 
@@ -439,16 +445,6 @@ Control {
                 }
             }
         }
-        EmojiPicker {
-            id: emojiPicker
-
-            Layout.fillWidth: true
-
-            visible: false
-
-            textArea: inputField
-            emojiModel: EmojiModel { id: emojiModel }
-        }
     }
 
     function insert(str) {

imports/NeoChat/Component/Emoji/EmojiPicker.qml

@@ -6,12 +6,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
-import QtQuick.Controls.Material 2.12
+import org.kde.kirigami 2.13 as Kirigami
 
 import NeoChat.Component 1.0
 
 import org.kde.neochat 1.0
-import NeoChat.Setting 1.0
 
 ColumnLayout {
     property string emojiCategory: "history"
@@ -22,9 +21,7 @@ ColumnLayout {
 
     ListView {
         Layout.fillWidth: true
-        Layout.preferredHeight: 48
+        Layout.preferredHeight: Kirigami.Units.gridUnit * 2 + 2 // for the focus line
-        Layout.leftMargin: 24
-        Layout.rightMargin: 24
 
         boundsBehavior: Flickable.DragOverBounds
 
@@ -45,14 +42,14 @@ ColumnLayout {
         }
 
         delegate: ItemDelegate {
-            width: 64
+            width: Kirigami.Units.gridUnit * 2
-            height: 48
+            height: Kirigami.Units.gridUnit * 2
 
-            contentItem: Label {
+            contentItem: Kirigami.Heading {
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
+                level: 1
 
-                font.pixelSize: 24
                 font.family: 'emoji'
                 text: label
             }
@@ -65,28 +62,24 @@ ColumnLayout {
 
                 visible: emojiCategory === category
 
-                color: Material.accent
+                color: Kirigami.Theme.focusColor
             }
 
             onClicked: emojiCategory = category
         }
     }
 
-    Rectangle {
+    Kirigami.Separator {
         Layout.fillWidth: true
         Layout.preferredHeight: 1
-        Layout.leftMargin: 12
-        Layout.rightMargin: 12
-
-        color: MSettings.darkTheme ? "#424242" : "#e7ebeb"
     }
 
     GridView {
         Layout.fillWidth: true
-        Layout.preferredHeight: 180
+        Layout.preferredHeight: Kirigami.Units.gridUnit * 8
 
-        cellWidth: 48
+        cellWidth: Kirigami.Units.gridUnit * 2
-        cellHeight: 48
+        cellHeight: Kirigami.Units.gridUnit * 2
 
         boundsBehavior: Flickable.DragOverBounds
 
@@ -117,14 +110,13 @@ ColumnLayout {
         }
 
         delegate: ItemDelegate {
-            width: 48
+            width: Kirigami.Units.gridUnit * 2
-            height: 48
+            height: Kirigami.Units.gridUnit * 2
 
-            contentItem: Label {
+            contentItem: Kirigami.Heading {
+                level: 1
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
-
-                font.pixelSize: 32
                 font.family: 'emoji'
                 text: modelData.unicode
             }