Merge pull request #32 from langx/fix-login-overflow

Refactor login page layout and add OAuth buttons

Author: xuelink

assets/images/apple_icon.svg

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class OAuthButton extends StatelessWidget {
+  final String assetPath;
+  final VoidCallback onPressed;
+
+  const OAuthButton({
+    required this.assetPath,
+    required this.onPressed,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Brightness platformBrightness = MediaQuery.of(context).platformBrightness;
+    final bool isDarkMode = platformBrightness == Brightness.dark;
+    final bool isAppleIcon = assetPath.contains('apple_icon');
+
+    return GestureDetector(
+      onTap: onPressed,
+      child: Container(
+        height: 50,
+        width: 50,
+        decoration: BoxDecoration(
+          color: isDarkMode ? const Color(0xFF131314) : Colors.white,
+          borderRadius: BorderRadius.circular(4),
+          boxShadow: const [
+            BoxShadow(
+              offset: Offset(0, 1),
+              color: Color(0x4C3C4043),
+              blurRadius: 2,
+            ),
+            BoxShadow(
+              color: Color(0x26283C40),
+              offset: Offset(0, 1),
+              blurRadius: 3,
+              spreadRadius: 1,
+            ),
+          ],
+        ),
+        child: Center(
+          child: SvgPicture.asset(
+            assetPath,
+            width: 25,
+            height: 25,
+            colorFilter: isAppleIcon
+                ? ColorFilter.mode(
+                    isDarkMode ? Colors.white : Colors.black,
+                    BlendMode.srcIn,
+                  )
+                : null,
+          ),
+        ),
+      ),
+    );
+  }
+}

assets/images/discord_icon.svg

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
+import 'package:toastification/toastification.dart';
 
 // Themes Import
 import 'package:langx_flutter/theme.dart';
@@ -39,11 +40,14 @@ class Main extends ConsumerWidget {
           builder: (context) {
             WidgetsBinding.instance.addPostFrameCallback((_) {
               if (authNotifier.errorMessage != null) {
-                ScaffoldMessenger.of(context).showSnackBar(
-                  SnackBar(content: Text(authNotifier.errorMessage!)),
+                toastification.show(
+                  context: context,
+                  type: ToastificationType.error,
+                  title: Text(authNotifier.errorMessage!),
+                  autoCloseDuration: const Duration(seconds: 3),
+                  alignment: Alignment.topCenter,
                 );
-                authNotifier
-                    .clearErrorMessage(); // Clear the error message after displaying it
+                authNotifier.clearErrorMessage();
               }
             });