1 files changed, 53 insertions, 0 deletions
diff --git a/MessageOut.ui.qml b/MessageOut.ui.qml
new file mode 100644
index 0000000..671d4d5
--- /dev/null
+++ b/MessageOut.ui.qml
@@ -0,0 +1,53 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+import Bootstrap 5.3
+
+Item {
+    width: 360
+
+    RowLayout {
+        id: rowLayout
+        anchors.fill: parent
+
+        ColumnLayout {
+            Rectangle {
+                id: rectangle
+                width: 200
+                height: 200
+                color: "#2787f5"
+                radius: 16
+                Layout.fillWidth: true
+
+                Label {
+                    id: messageOut
+                    text: qsTr("Hey, Marshall! How are you? Can you please change the color theme of the website to pink and purple? 😂")
+                    anchors.fill: parent
+                    wrapMode: Text.Wrap
+                }
+            }
+
+            Label {
+                id: messageText
+                text: qsTr("08:45 PM")
+                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+            }
+        }
+
+        Rectangle {
+            id: messageOutAvatar
+            width: 64
+            height: 64
+            color: "#ffffff"
+            radius: 100
+            Layout.maximumHeight: 64
+            Layout.maximumWidth: 64
+            Layout.minimumHeight: 24
+            Layout.minimumWidth: 24
+            Layout.preferredHeight: 64
+            Layout.preferredWidth: 64
+            Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+        }
+    }
+}