Update theme for menus (#2578)

* Add radius to selected menu items, adust width to fit. Update colors.
* Fix server text color in chatview.

Signed-off-by: 3simplex <10260755+3Simplex@users.noreply.github.com>

gpt4all-chat/qml/ChatView.qml

@@ -408,7 +408,7 @@ Rectangle {
                     }
                     delegate: ItemDelegate {
                         id: comboItemDelegate
-                        width: comboItemPopup.width
+                        width: comboItemPopup.width -20
                         contentItem: Text {
                             text: name
                             color: theme.textColor
@@ -417,7 +417,8 @@ Rectangle {
                             verticalAlignment: Text.AlignVCenter
                         }
                         background: Rectangle {
-                            color: highlighted ? theme.lightContrast : theme.darkContrast
+                            radius: 10
+                            color: highlighted ? theme.menuHighlightColor : theme.menuBackgroundColor
                         }
                         highlighted: comboBox.highlightedIndex === index
                     }
@@ -451,7 +452,9 @@ Rectangle {
                         }
 
                         background: Rectangle {
-                            color: theme.controlBackground
+                            border.color: theme.menuBorderColor
+                            border.width: 1
+                            color: theme.menuBackgroundColor
                             radius: 10
                         }
                     }
@@ -888,9 +891,7 @@ Rectangle {
                                         color: {
                                             if (!currentChat.isServer)
                                                 return theme.textColor
-                                            if (name === qsTr("Response: "))
+                                            return theme.white
-                                                return theme.white
-                                            return theme.black
                                         }
                                         wrapMode: Text.WordWrap
                                         textFormat: TextEdit.PlainText

gpt4all-chat/qml/ModelSettings.qml

@@ -62,7 +62,7 @@ MySettingsTab {
                     elide: Text.ElideRight
                 }
                 delegate: ItemDelegate {
-                    width: comboBox.width
+                    width: comboBox.width -20
                     contentItem: Text {
                         text: name
                         color: theme.textColor
@@ -71,7 +71,8 @@ MySettingsTab {
                         verticalAlignment: Text.AlignVCenter
                     }
                     background: Rectangle {
-                        color: highlighted ? theme.lightContrast : theme.darkContrast
+                        radius: 10
+                        color: highlighted ? theme.menuHighlightColor : theme.menuBackgroundColor
                     }
                     highlighted: comboBox.highlightedIndex === index
                 }

gpt4all-chat/qml/MyComboBox.qml

@@ -45,7 +45,7 @@ ComboBox {
         }
     }
     delegate: ItemDelegate {
-        width: comboBox.width
+        width: comboBox.width -20
         contentItem: Text {
             text: modelData
             color: theme.textColor
@@ -54,7 +54,8 @@ ComboBox {
             verticalAlignment: Text.AlignVCenter
         }
         background: Rectangle {
-            color: highlighted ? theme.lightContrast : theme.darkContrast
+            radius: 10
+            color: highlighted ? theme.menuHighlightColor : theme.menuBackgroundColor
         }
         highlighted: comboBox.highlightedIndex === index
     }
@@ -84,7 +85,9 @@ ComboBox {
         }
 
         background: Rectangle {
-            color: theme.controlBackground
+            color: theme.menuBackgroundColor//theme.controlBorder
+            border.color: theme.menuBorderColor //theme.controlBorder
+            border.width: 1
             radius: 10
         }
     }

gpt4all-chat/qml/MyMenu.qml

@@ -14,7 +14,9 @@ Menu {
     background: Rectangle {
         implicitWidth: 220
         implicitHeight: 40
-        color: theme.controlBackground
+        color: theme.menuBackgroundColor
+        border.color: theme.menuBorderColor
+        border.width: 1
         radius: 10
     }
 

gpt4all-chat/qml/MyMenuItem.qml

@@ -6,7 +6,9 @@ import QtQuick.Controls.Basic
 MenuItem {
     id: item
     background: Rectangle {
-        color: item.highlighted ? theme.lightContrast : theme.darkContrast
+        radius: 10
+        width: parent.width -20
+        color: item.highlighted ? theme.menuHighlightColor : theme.menuBackgroundColor
     }
 
     contentItem: Text {

gpt4all-chat/qml/Theme.qml

@@ -128,6 +128,10 @@ QtObject {
         }
     }
 
+ /*
+  These nolonger apply to anything (remove this?)
+  Replaced by menuHighlightColor & menuBackgroundColor now using different colors.
+
     property color darkContrast: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":
@@ -149,7 +153,7 @@ QtObject {
                 return gray0
         }
     }
-
+*/
     property color controlBorder: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":
@@ -219,6 +223,8 @@ QtObject {
                 return gray50
         }
     }
+/*
+  These nolonger apply to anything (remove this?)
 
     property color containerForeground: {
         switch (MySettings.chatTheme) {
@@ -230,7 +236,7 @@ QtObject {
                 return gray300
         }
     }
-
+*/
     property color containerBackground: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":
@@ -1164,6 +1170,39 @@ QtObject {
         }
     }
 
+    property color menuBackgroundColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue700
+            case "Dark":
+                return darkgray200
+            default:
+                return gray50
+        }
+    }
+
+    property color menuHighlightColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue400
+            case "Dark":
+                return darkgray0
+            default:
+                return green100
+        }
+    }
+
+    property color menuBorderColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue400
+            case "Dark":
+                return gray800
+            default:
+                return gray300
+        }
+    }
+
     property real fontScale: MySettings.fontSize === "Small"  ? 1 :
                              MySettings.fontSize === "Medium" ? 1.3 :
                                                   /* "Large" */ 1.8