From 64ec93d59b5721f770c484e61edc0711a89c891a Mon Sep 17 00:00:00 2001
From: Adam Treat <treat.adam@gmail.com>
Date: Tue, 30 May 2023 21:03:40 -0400
Subject: [PATCH] Some color and theme enhancements to make the UI contrast a
 bit better.

---
 gpt4all-chat/main.qml      | 48 ++++++++++++++++++++++++--------------
 gpt4all-chat/qml/Theme.qml |  2 ++
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/gpt4all-chat/main.qml b/gpt4all-chat/main.qml
index ff343d22..b1cdd625 100644
--- a/gpt4all-chat/main.qml
+++ b/gpt4all-chat/main.qml
@@ -3,6 +3,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Controls.Basic
 import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 import llm
 import download
 import network
@@ -596,17 +597,7 @@ Window {
 
             Rectangle {
                 anchors.fill: parent
-                color: currentChat.isServer ? theme.backgroundDark : theme.backgroundLighter
-
-                Image {
-                    visible: currentChat.isServer || currentChat.modelName.startsWith("chatgpt-")
-                    anchors.fill: parent
-                    sourceSize.width: 1024
-                    sourceSize.height: 1024
-                    fillMode: Image.PreserveAspectFit
-                    opacity: 0.15
-                    source: "qrc:/gpt4all/icons/network.svg"
-                }
+                color: currentChat.isServer ? theme.backgroundDark : theme.backgroundLight
 
                 ListView {
                     id: listView
@@ -629,7 +620,7 @@ Window {
                         cursorVisible: currentResponse ? currentChat.responseInProgress : false
                         cursorPosition: text.length
                         background: Rectangle {
-                            opacity: 0.3
+                            opacity: 1.0
                             color: name === qsTr("Response: ")
                                 ? (currentChat.isServer ? theme.backgroundDarkest : theme.backgroundLighter)
                                 : (currentChat.isServer ? theme.backgroundDark : theme.backgroundLight)
@@ -813,6 +804,16 @@ Window {
                         height: 60
                     }
                 }
+
+                Image {
+                    visible: currentChat.isServer || currentChat.modelName.startsWith("chatgpt-")
+                    anchors.fill: parent
+                    sourceSize.width: 1024
+                    sourceSize.height: 1024
+                    fillMode: Image.PreserveAspectFit
+                    opacity: 0.15
+                    source: "qrc:/gpt4all/icons/network.svg"
+                }
             }
         }
 
@@ -854,12 +855,22 @@ Window {
             }
             anchors.bottom: textInputView.top
             anchors.horizontalCenter: textInputView.horizontalCenter
-            anchors.bottomMargin: 40
+            anchors.bottomMargin: 20
             padding: 15
             text: currentChat.responseInProgress ? qsTr("Stop generating") : qsTr("Regenerate response")
             Accessible.description: qsTr("Controls generation of the response")
         }
 
+        RectangularGlow {
+            id: effect
+            anchors.fill: textInputView
+            glowRadius: 50
+            spread: 0
+            color: theme.backgroundDark
+            cornerRadius: 10
+            opacity: 0.2
+        }
+
         ScrollView {
             id: textInputView
             anchors.left: parent.left
@@ -868,19 +879,20 @@ Window {
             anchors.margins: 30
             height: Math.min(contentHeight, 200)
             visible: !currentChat.isServer
-
             TextArea {
                 id: textInput
-                color: theme.textColor
-                padding: 20
+                color: theme.textAccent
+                topPadding: 30
+                bottomPadding: 30
+                leftPadding: 20
                 rightPadding: 40
                 enabled: currentChat.isModelLoaded && !currentChat.isServer
                 wrapMode: Text.WordWrap
-                font.pixelSize: theme.fontSizeLarge
+                font.pixelSize: theme.fontSizeLarger
                 placeholderText: qsTr("Send a message...")
                 placeholderTextColor: theme.mutedTextColor
                 background: Rectangle {
-                    color: theme.backgroundLighter
+                    color: theme.backgroundAccent
                     radius: 10
                 }
                 Accessible.role: Accessible.EditableText
diff --git a/gpt4all-chat/qml/Theme.qml b/gpt4all-chat/qml/Theme.qml
index c984fd51..f35dfc5e 100644
--- a/gpt4all-chat/qml/Theme.qml
+++ b/gpt4all-chat/qml/Theme.qml
@@ -4,6 +4,7 @@ import QtQuick.Controls.Basic
 
 QtObject {
     property color textColor: "#d1d5db"
+    property color textAccent: "#8e8ea0"
     property color mutedTextColor: backgroundLightest
     property color textErrorColor: "red"
     property color backgroundDarkest: "#202123"
@@ -12,6 +13,7 @@ QtObject {
     property color backgroundLight: "#343541"
     property color backgroundLighter: "#444654"
     property color backgroundLightest: "#7d7d8e"
+    property color backgroundAccent: "#40414f"
     property color buttonBorder: "#565869"
     property color dialogBorder: "#d1d5db"
     property color userColor: "#ec86bf"