From 44d48af12caf276b4ab1ca9f1632a7df063fdc82 Mon Sep 17 00:00:00 2001
From: Tommy Chow <tommyxchow@gmail.com>
Date: Mon, 8 Aug 2022 18:58:41 -0400
Subject: [PATCH] Fix misaligned alerts & add notification widget

---
 lib/screens/channel/chat/chat.dart | 40 +++++---------------
 lib/widgets/alert_message.dart     |  1 -
 lib/widgets/notification.dart      | 60 ++++++++++++++++++++++++++++++
 3 files changed, 70 insertions(+), 31 deletions(-)
 create mode 100644 lib/widgets/notification.dart

diff --git a/lib/screens/channel/chat/chat.dart b/lib/screens/channel/chat/chat.dart
index 6aa18b2d..d122c75a 100644
--- a/lib/screens/channel/chat/chat.dart
+++ b/lib/screens/channel/chat/chat.dart
@@ -5,8 +5,8 @@ import 'package:frosty/screens/channel/chat/emote_menu/emote_menu.dart';
 import 'package:frosty/screens/channel/chat/widgets/chat_bottom_bar.dart';
 import 'package:frosty/screens/channel/chat/widgets/chat_message.dart';
 import 'package:frosty/screens/channel/stores/chat_store.dart';
-import 'package:frosty/widgets/alert_message.dart';
 import 'package:frosty/widgets/button.dart';
+import 'package:frosty/widgets/notification.dart';
 
 class Chat extends StatelessWidget {
   final ChatStore chatStore;
@@ -57,37 +57,17 @@ class Chat extends StatelessWidget {
                       child: chatStore.notification != null
                           ? Align(
                               alignment: chatStore.settings.chatNotificationsOnBottom ? Alignment.bottomCenter : Alignment.topCenter,
-                              child: Container(
-                                decoration: BoxDecoration(
-                                  color: Theme.of(context).colorScheme.primary.withOpacity(0.8),
-                                  borderRadius: BorderRadius.circular(30.0),
-                                ),
-                                margin: const EdgeInsets.all(10),
-                                child: Row(
-                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                                  children: [
-                                    Padding(
-                                      padding: const EdgeInsets.all(10.0),
-                                      child: AlertMessage(
-                                        message: chatStore.notification!,
-                                        color: Colors.white,
-                                      ),
-                                    ),
-                                    if (chatStore.notification!.contains('copied'))
-                                      Button(
-                                        onPressed: () async {
-                                          // Paste clipboard text into the text controller.
-                                          final data = await Clipboard.getData(Clipboard.kTextPlain);
+                              child: FrostyNotification(
+                                message: chatStore.notification!,
+                                showPasteButton: chatStore.notification!.contains('copied'),
+                                onButtonPressed: () async {
+                                  // Paste clipboard text into the text controller.
+                                  final data = await Clipboard.getData(Clipboard.kTextPlain);
 
-                                          if (data != null) chatStore.textController.text = data.text!;
+                                  if (data != null) chatStore.textController.text = data.text!;
 
-                                          chatStore.updateNotification('');
-                                        },
-                                        fill: false,
-                                        child: const Text('Paste'),
-                                      ),
-                                  ],
-                                ),
+                                  chatStore.updateNotification('');
+                                },
                               ),
                             )
                           : null,
diff --git a/lib/widgets/alert_message.dart b/lib/widgets/alert_message.dart
index 619772ac..613ed9c2 100644
--- a/lib/widgets/alert_message.dart
+++ b/lib/widgets/alert_message.dart
@@ -16,7 +16,6 @@ class AlertMessage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Row(
-      mainAxisSize: MainAxisSize.min,
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Icon(
diff --git a/lib/widgets/notification.dart b/lib/widgets/notification.dart
new file mode 100644
index 00000000..feb1905d
--- /dev/null
+++ b/lib/widgets/notification.dart
@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:frosty/widgets/button.dart';
+
+class FrostyNotification extends StatelessWidget {
+  final String message;
+  final bool showPasteButton;
+  final Function() onButtonPressed;
+
+  const FrostyNotification({
+    Key? key,
+    required this.message,
+    required this.showPasteButton,
+    required this.onButtonPressed,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.primary.withOpacity(0.8),
+        borderRadius: BorderRadius.circular(30.0),
+      ),
+      margin: const EdgeInsets.all(10),
+      child: Row(
+        children: [
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.all(10),
+              child: Row(
+                children: [
+                  const Icon(
+                    Icons.info,
+                    color: Colors.white,
+                  ),
+                  const SizedBox(width: 10),
+                  Expanded(
+                    child: Text(
+                      message,
+                      style: const TextStyle(
+                        color: Colors.white,
+                        fontWeight: FontWeight.w500,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          if (showPasteButton)
+            Button(
+              onPressed: onButtonPressed,
+              fill: false,
+              child: const Text('Paste'),
+            ),
+        ],
+      ),
+    );
+  }
+}