Improve layout of Emoji Picker

Respect system styling
Increase size of emojis (to remove empty space)
Add hover effect (partially adresses #41)
Less hardcoding of sizes
Use emoji font (color)

3 files changed, 27 insertions, 3 deletions

diff --git a/resources/styles/nheko-dark.qss b/resources/styles/nheko-dark.qss
index 7b5486b0..1e1333b2 100644
--- a/resources/styles/nheko-dark.qss
+++ b/resources/styles/nheko-dark.qss
@@ -232,6 +232,10 @@ emoji--Panel > * {
     color: #caccd1;
 }
 
+emoji--Category {
+    qproperty-hoverBackgroundColor: rgba(230, 230, 230, 30);
+}
+
 emoji--Category,
 emoji--Category > * {
     background-color: #2d3139;
diff --git a/resources/styles/nheko.qss b/resources/styles/nheko.qss
index c352956a..a70441be 100644
--- a/resources/styles/nheko.qss
+++ b/resources/styles/nheko.qss
@@ -200,6 +200,10 @@ emoji--Panel > * {
     color: #333;
 }
 
+emoji--Category {
+    qproperty-hoverBackgroundColor: rgba(200, 200, 200, 70);
+}
+
 emoji--Category,
 emoji--Category > * {
     background-color: white;
diff --git a/resources/styles/system.qss b/resources/styles/system.qss
index c1e8898a..dfb8ce65 100644
--- a/resources/styles/system.qss
+++ b/resources/styles/system.qss
@@ -85,10 +85,10 @@ QListWidget {
     background-color: palette(window);
 }
 
-RoomInfoListItem {
+RoomInfoListItem, UserMentionsWidget {
     qproperty-mentionedColor: palette(alternate-base);
     qproperty-highlightedBackgroundColor: palette(highlight);
-    qproperty-hoverBackgroundColor: palette(base);
+    qproperty-hoverBackgroundColor: palette(light);
     qproperty-backgroundColor: palette(window);
 
     qproperty-titleColor: palette(text);
@@ -116,7 +116,7 @@ RoomInfoListItem {
 
 CommunitiesListItem {
     qproperty-highlightedBackgroundColor: palette(highlight);
-    qproperty-hoverBackgroundColor: palette(base);
+    qproperty-hoverBackgroundColor: palette(light);
     qproperty-backgroundColor: palette(window);
 
     qproperty-avatarBgColor: palette(base);
@@ -131,6 +131,22 @@ LoadingIndicator {
     qproperty-color: palette(light);
 }
 
+emoji--Panel,
+emoji--Panel > * {
+    background-color: palette(base);
+    color: palette(text);
+}
+
+emoji--Category {
+    qproperty-hoverBackgroundColor: palette(highlight);
+}
+
+emoji--Category,
+emoji--Category > * {
+    background-color: palette(window);
+    color: palette(text);
+}
+
 FloatingButton {
     qproperty-backgroundColor: palette(base);
     qproperty-foregroundColor: palette(text);