Add a close button for dialogs.

gpt4all-chat/qml/AboutDialog.qml

@@ -7,7 +7,7 @@ import download
 import network
 import llm
 
-Dialog {
+MyDialog {
     id: abpoutDialog
     anchors.centerIn: parent
     modal: false
@@ -102,12 +102,4 @@ Dialog {
             Accessible.description: qsTr("Contains embedded link to https://home.nomic.ai")
         }
     }
-
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
 }

gpt4all-chat/qml/CollectionsDialog.qml

@@ -8,24 +8,15 @@ import chatlistmodel
 import localdocs
 import llm
 
-Dialog {
+MyDialog {
     id: collectionsDialog
     modal: true
-    opacity: 0.9
     padding: 20
     width: 480
     height: 640
 
     property var currentChat: ChatListModel.currentChat
 
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
-
     Label {
         id: listLabel
         anchors.top: parent.top

gpt4all-chat/qml/ModelDownloaderDialog.qml

@@ -11,20 +11,11 @@ import modellist
 import network
 import mysettings
 
-Dialog {
+MyDialog {
     id: modelDownloaderDialog
     modal: true
-    opacity: 0.9
     closePolicy: ModelList.installedModels.count === 0 ? Popup.NoAutoClose : (Popup.CloseOnEscape | Popup.CloseOnPressOutside)
-    padding: 20
-    bottomPadding: 30
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
+    padding: 10
 
     onOpened: {
         Network.sendModelDownloaderDialog();
@@ -38,7 +29,7 @@ Dialog {
 
     ColumnLayout {
         anchors.fill: parent
-        anchors.margins: 20
+        anchors.margins: 10
         spacing: 30
 
         Label {

gpt4all-chat/qml/MyDialog.qml

@@ -0,0 +1,33 @@
+import QtCore
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtQuick.Dialogs
+import QtQuick.Layouts
+
+Dialog {
+    id: myDialog
+    background: Rectangle {
+        width: parent.width
+        height: parent.height
+        color: theme.backgroundDarkest
+        border.width: 1
+        border.color: theme.dialogBorder
+        radius: 10
+    }
+
+    MyToolButton {
+        x: 0 + myDialog.width - myDialog.padding - width - 15
+        y: 0 - myDialog.padding + 15
+        z: 300
+        visible: myDialog.closePolicy != Popup.NoAutoClose
+        width: 30
+        height: 30
+        padding: 0
+        source: "qrc:/gpt4all/icons/close.svg"
+        fillMode: Image.PreserveAspectFit
+        onClicked: {
+            myDialog.close();
+        }
+    }
+}

gpt4all-chat/qml/MyToolButton.qml

@@ -9,6 +9,7 @@ Button {
     padding: 10
     property bool toggled: false
     property alias source: image.source
+    property alias fillMode: image.fillMode
     contentItem: Text {
         text: myButton.text
         horizontalAlignment: Text.AlignHCenter

gpt4all-chat/qml/NetworkDialog.qml

@@ -8,7 +8,7 @@ import network
 import llm
 import mysettings
 
-Dialog {
+MyDialog {
     id: networkDialog
     anchors.centerIn: parent
     modal: true
@@ -94,14 +94,6 @@ NOTE: By turning on this feature, you will be sending your data to the GPT4All O
         }
     }
 
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
-
     footer: DialogButtonBox {
         id: dialogBox
         padding: 20

gpt4all-chat/qml/NewVersionDialog.qml

@@ -7,27 +7,18 @@ import download
 import network
 import llm
 
-Dialog {
+MyDialog {
     id: newVerionDialog
     anchors.centerIn: parent
     modal: true
-    opacity: 0.9
     width: contentItem.width
     height: contentItem.height
-    padding: 20
+    padding: 10
 
     Theme {
         id: theme
     }
 
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
-
     Item {
         id: contentItem
         width: childrenRect.width + 40

gpt4all-chat/qml/SettingsDialog.qml

@@ -11,19 +11,10 @@ import network
 import llm
 import mysettings
 
-Dialog {
+MyDialog {
     id: settingsDialog
     modal: true
     padding: 20
-    bottomPadding: 30
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
-
     onOpened: {
         Network.sendSettingsDialog();
     }

gpt4all-chat/qml/StartupDialog.qml

@@ -8,14 +8,13 @@ import network
 import llm
 import mysettings
 
-Dialog {
+MyDialog {
     id: startupDialog
     anchors.centerIn: parent
     modal: true
-    opacity: 0.9
-    padding: 20
+    padding: 10
     width: 1024
-    height: column.height + 40
+    height: column.height + 20
     closePolicy: !optInStatisticsRadio.choiceMade || !optInNetworkRadio.choiceMade ? Popup.NoAutoClose : (Popup.CloseOnEscape | Popup.CloseOnPressOutside)
 
     Theme {
@@ -345,12 +344,4 @@ model release that uses your data!")
             }
         }
     }
-
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
 }

gpt4all-chat/qml/ThumbsDownDialog.qml

@@ -7,7 +7,7 @@ import download
 import network
 import llm
 
-Dialog {
+MyDialog {
     id: thumbsDownDialog
     modal: true
     opacity: 0.9
@@ -65,14 +65,6 @@ Dialog {
         }
     }
 
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
-
     footer: DialogButtonBox {
         padding: 20
         alignment: Qt.AlignRight