feat: base UI added

lib/constants/app_colors.dart

@@ -34,6 +34,8 @@ class AppColors {
   static const Color dark800 = Color(0xFF1C212E);
   static const Color dark900 = Color(0xFF131825);
 
+  static const Color textColor = Color(0xFF1A2232);
+
   /// Colors used in gradient
   static const Color aqua10 = Color(0x1A3CFFF6);
   static const Color pink15 = Color(0x26FF557E);

lib/services/auth_service.dart

@@ -37,6 +37,7 @@ class AuthService extends BaseAuthService {
     } on SocketException {
       return left(Failure("Internet Unavailable"));
     } catch (e) {
+      print(e.toString());
       return left(Failure("Unknown error occured."));
     }
   }

lib/themes/text_styles.dart

@@ -23,92 +23,92 @@ class AppTextStyles {
   static TextStyle get h1 => TextStyle(
         fontFamily: boldFont,
         fontSize: 60.adjustSize,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get h1SemiBold => const TextStyle(
         fontFamily: semiBoldFont,
         fontSize: 60,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get h2 => const TextStyle(
         fontFamily: boldFont,
         fontSize: 39,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get h2SemiBold => const TextStyle(
         fontFamily: semiBoldFont,
         fontSize: 39,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get h3 => const TextStyle(
         fontFamily: boldFont,
         fontSize: 33,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get h3SemiBold => const TextStyle(
         fontFamily: semiBoldFont,
         fontSize: 33,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get h4 => const TextStyle(
         fontFamily: boldFont,
         fontSize: 28,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get h4SemiBold => TextStyle(
         fontFamily: semiBoldFont,
         fontSize: 28.adjustSize,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get h5 => TextStyle(
         fontFamily: boldFont,
         fontSize: 23.adjustSize,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get h5SemiBold => const TextStyle(
         fontFamily: semiBoldFont,
         fontSize: 23,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get h6 => const TextStyle(
         fontFamily: boldFont,
         fontSize: 19,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get h6SemiBold => const TextStyle(
         fontFamily: semiBoldFont,
         fontSize: 19,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   // Paragraphs styles
   static TextStyle get p1 => TextStyle(
         fontFamily: regularFont,
         fontSize: 14.adjustSize,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get p1Bold => TextStyle(
         fontFamily: semiBoldFont,
         fontSize: 14.adjustSize,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get p2 => TextStyle(
         fontFamily: regularFont,
         fontSize: 16.adjustSize,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get p2Bold => TextStyle(
@@ -119,12 +119,12 @@ class AppTextStyles {
   static TextStyle get p3 => TextStyle(
         fontFamily: regularFont,
         fontSize: 18.adjustSize,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 
   static TextStyle get p3Bold => TextStyle(
         fontFamily: semiBoldFont,
         fontSize: 18.adjustSize,
-        color: AppColors.neutral200,
+        color: AppColors.textColor,
       );
 }

lib/ui/common/base_background.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:secret_dms/constants/app_colors.dart';
+import 'package:secret_dms/themes/text_styles.dart';
+import 'package:secret_dms/ui/common/circular_gradient_container.dart';
+
+/// [BaseBackground] widget is a basic stack widget with some customization to fit the needs of design. It's children can have all the properties of [Stack].
+class BaseBackground extends StatelessWidget {
+  const BaseBackground({Key? key, required this.children}) : super(key: key);
+
+  /// children is a [List<Widget>] and it is under a [Stack] widget so it can be positioned by wrapping a [Widget] in [Positioned] widget.
+  final List<Widget> children;
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: const BoxDecoration(
+        color: AppColors.primaryColor,
+      ),
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          Positioned(
+            top: -100.adjustSize,
+            left: -100.adjustSize,
+            child: CircularGradientContainer(
+              radius: 250.adjustSize,
+              color: AppColors.aqua10.withOpacity(.04),
+            ),
+          ),
+          Positioned(
+            bottom: 30.adjustSize,
+            right: -100.adjustSize,
+            child: CircularGradientContainer(
+              radius: 200.adjustSize,
+              color: AppColors.pink15.withOpacity(0.12),
+            ),
+          ),
+          ...children,
+        ],
+      ),
+    );
+  }
+}

lib/ui/common/circular_gradient_container.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:secret_dms/themes/text_styles.dart';
+
+class CircularGradientContainer extends StatelessWidget {
+  const CircularGradientContainer({
+    required this.radius,
+    required this.color,
+    Key? key,
+  }) : super(key: key);
+
+  final double radius;
+  final Color color;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: radius,
+      width: radius,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        boxShadow: [
+          BoxShadow(
+            color: color,
+            blurRadius: 100.adjustSize,
+            spreadRadius: radius,
+          )
+        ],
+      ),
+    );
+  }
+}

lib/ui/common/shh_button.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:secret_dms/constants/app_colors.dart';
+import 'package:secret_dms/themes/app_dimensions.dart';
+import 'package:secret_dms/themes/text_styles.dart';
+
+class ShhButton extends StatelessWidget {
+  const ShhButton({
+    required this.onPressed,
+    required this.text,
+    this.width,
+    this.height,
+    Key? key,
+  }) : super(key: key);
+
+  final Function() onPressed;
+  final String text;
+  final double? width;
+  final double? height;
+  @override
+  Widget build(BuildContext context) {
+    return MaterialButton(
+      padding: EdgeInsets.symmetric(
+        vertical: height ?? largeValue,
+        horizontal: width ?? largeValue,
+      ),
+      color: AppColors.white,
+      onPressed: onPressed,
+      child: Text(
+        text,
+        style: AppTextStyles.p3,
+      ),
+    );
+  }
+}

lib/ui/pages/login/login_page.dart

@@ -1,5 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:secret_dms/constants/app_assets.dart';
+import 'package:secret_dms/di/di.dart';
+import 'package:secret_dms/ui/common/base_background.dart';
+import 'package:secret_dms/ui/common/shh_button.dart';
 
 class LoginPage extends ConsumerStatefulWidget {
   const LoginPage({Key? key}) : super(key: key);
@@ -11,8 +16,22 @@ class LoginPage extends ConsumerStatefulWidget {
 class _LoginPageState extends ConsumerState<LoginPage> {
   @override
   Widget build(BuildContext context) {
-    return const Scaffold(
-      body: Center(child: Text("Login View")),
+    return Scaffold(
+      body: BaseBackground(
+        children: [
+          Column(
+            children: [
+              SvgPicture.asset(AppAssets.logo),
+              ShhButton(
+                onPressed: () {
+                  ref.watch(authNotifierProvider.notifier).signInUser();
+                },
+                text: "Get Questions",
+              )
+            ],
+          ),
+        ],
+      ),
     );
   }
 }